Angular 2 FormBuilderを使用してFormArray内のネストされたFormArrayにアクセスする

Question

まず、Angular 2から始めて、ネストされたフォームを作成して検証し、GroupProjectオブジェクトに新しいオブジェクトProjectを追加しようとしています。

は、ここに私の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と呼ばれ、それぞれに1つの配列があります。

ERRORの例外TypeError：プロパティを読み取ることができません「制御」

未定義の

だから問題は、私は、オブジェクトgroupproject

は、実際に私は次のエラーを取得しています内のオブジェクトのプロジェクトを挿入することはできませんよということです

Answer 1

次のコードを入力した中で最も可能性の高い：

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

を

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

チェックもPlunker Example

作業答えるためにも

• Nested arrays in Angular 2 reactive forms?