Angular 2使用FormBuilder訪問FormArrays中的嵌套FormArrays

Question

首先，我只是從Angular 2開始，我試圖構建一個嵌套表單並驗證它並將新對象Projects添加到對象GroupProject中。

這是我的TS文件的一部分：

ngOnInit() { 
    this.myForm = this.formBuilder.group({ 
    groupproject: this.formBuilder.array([ 
     this.initGroupProjects() 
    ]) 
    }); 
} 

public initGroupProjects(): any { 
    return this.formBuilder.group({ 
     groupproject: this.formBuilder.array([this.initProjects()]) 
    }); 
} 

public initProjects(): any { 
    return this.formBuilder.group({ 
    name: ['', [Validators.required, Validators.minLength(3)]], 
    some_array: this.formBuilder.array([ 
     this.formBuilder.group({ 
     name: ['', Validators.required], 
     attr: ['', Validators.required], 
     some_id: [1, Validators.required] 
     }) 
    ]) 
    }); 
} 

addProject(): void { 
    const control = <FormArray> this.myForm.controls['projects']; 
    control.push(this.initProjects()); 
} 

查看：

<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)"> 
    <div formArrayName="groupproject"> 
     <div [formGroupName]="gp" *ngFor="let objGroupProject of myForm.controls.groupproject.controls; let gp = index"> 
      <div formArrayName="projects"> 
       <div [formGroupName]="i" *ngFor="let project of objGroupProject.controls.projects.controls; let i = index"> 
        <md-input placeholder="Name" formControlName="name"></md-input> 
        <div formArrayName="some_array"> 
         <div [formGroupName]="x" *ngFor="let some_obj of project.controls.some_array.controls; let x = index"> 
          <div> 
           <md-input placeholder="Nome" formControlName="name"></md-input> 
           <small *ngIf="!some_obj.controls.name.valid">Nome é requerido</small> 
          </div> 
          <md-input type="number" placeholder="Cost" formControlName="attr" required></md-input> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <button type="submit" md-raised-button color="primary" [disabled]="!myForm.valid">Submit</button> 
</form> 
<pre>form value: <br>{{myForm.value | json}}</pre> 

形式值的輸出：

形式值：

{ 
    "groupproject":[ 
     { 
     "projects":[ 
      { 
       "name":"", 
       "some_array":[ 
        { 
        "name":"", 
        "attr":"", 
        "some_id":1 
        } 
       ] 
      }, 
      { 
       "name":"", 
       "some_array":[ 
        { 
        "name":"", 
        "attr":"", 
        "some_id":1 
        } 
       ] 
      } 
     ] 
     } 
    ] 
} 

嗯，你可以看到我有一些數組被稱爲groupprojects，每個內部有一個數組。

所以問題是，我沒能在對象groupproject

其實我發現了以下錯誤插入的對象項目：

錯誤類型錯誤：無法讀取屬性「控制」的未定義

Answer 1

很可能是因爲在下面的代碼類型：

public initGroupProjects(): any { 
    return this.formBuilder.group({ 
     groupproject: this.formBuilder.array([this.initProjects()]) 
     ^^^^^^^ 
    }); 
} 

我覺得應該是projects而不是groupproject：

public initGroupProjects(): any { 
    return this.formBuilder.group({ 
     projects: this.formBuilder.array([this.initProjects()]) 
    }); 
} 

檢查也正在Plunker Example

也

• Nested arrays in Angular 2 reactive forms?