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?