Angular2 第三级 FormArray 嵌套，

Question

createForm() {
    this.myForm = this.fb.group({
        name: '',
        lvl2: this.fb.array([
            this.initLvl2(),
        ])
    })
}

<form [formGroup]="myForm" novalidate>
<div formArrayName="lvl2">
    <div *ngFor="let lvl2s of myForm.controls.lvl2.controls; let i=index let last=last">
        <div class="panel-body" [formGroupName]="i"> 
                <div *ngFor="let lvl3 of lvl2s.controls.lvl3.controls; let i=index let last=last" formArrayName="lvl3">
                    <div class="panel-body" [formGroupName]="i">
                              <div class="margin-20">
                                        <button md-raised-button type="button" *ngIf="last" (click)="add()" style="cursor: default">Add Action</button>
                                    </div>
                    </div>
                </div>
        </div>
    </div>

initLvl2() {
    return this.fb.group({
        name: '',
        lvl3: this.fb.array([
            this.initLvl3()
        ])
    })
}

initLvl3() {
    return this.fb.group({
        parameters: '',
        wait_time: ''
    })
  }

  add(){
  const control = <FormArray>this.myForm.get('lvl2.lvl3')
  control.push(this.initLvl3());
}

几个小时后，我尝试了所有方法，但出现了一些错误无法读取 null 的属性 'push'，如何处理？我对此感到厌倦，有几个问题，但大多没有很好的答复

Answer 1

由于 lv2 是一个 Array，您必须将 index 从模板传递到组件才能获得 lv3 表单组相关：

将您的 function 更改为：

add(index: number): void {
  const arr = this.myForm.get(`lvl2.${index}.lvl3`) as FormArray;
  arr.push(this.initLvl3());
}

Angular2 第三级 FormArray 嵌套，

Angular2 3rd level FormArray nesting,

typescript

angular2-forms

angular