需要添加從陣列內角陣列表格數組中

Question

我試圖在表單formgroup添加動態字段，我需要添加一個formarray裏面的數組與在那個形式組，我已經嘗試過，但我正在下面的錯誤

error_handler.js：54 EXCEPTION：錯誤./AppComponent類AppComponent - 聯模板：6：16引起的：無法讀取的不確定

財產「推」請幫我解決這個問題，謝謝提前

這裏是plunkr

Component.ts

import { Component } from '@angular/core'; 
import { FormGroup, FormBuilder, FormArray, ReactiveFormsModule } from "@angular/forms"; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    public formGroupz: FormGroup; 
    constructor(private frmbldr: FormBuilder) { } 
    private fieldIdentifier: any; 
    items: any[] = []; 
    ngOnInit() { 
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges. 
    //Add 'implements OnInit' to the class. 
    this.formGroupz = this.frmbldr.group({ 
     main:this.frmbldr.array([this.initRules()]) 
    }) 
    } 
    initRules(){ 
     return this.frmbldr.group({ 
     ifgroup: this.frmbldr.array([]), 
     truegrp: this.frmbldr.array([]), 
     falsegrp: this.frmbldr.array([]) 
    }) 
    } 
    ifFields() { 
    debugger 
    return this.frmbldr.group({ 
     conditionfields: [''] 
    }) 
    } 
    initextraField() { 
    debugger 
    if (this.fieldIdentifier == "true") { 
     return this.frmbldr.group({ 
     truefields: [''] 
     }) 
    } 
    else if (this.fieldIdentifier == "false") { 
     return this.frmbldr.group({ 
     falsefields: [''] 
     }) 
    } 
    } 
    addiffields() { 
    debugger 
    this.fieldIdentifier = "if"; 
    const control = <FormArray>this.formGroupz.controls['main']['controls']['ifgroup']; 
    const addrCtrl = this.ifFields(); 
    control.push(addrCtrl); 
    } 
    addtruefields() { 
    debugger 
    this.fieldIdentifier = "true"; 
    const control = <FormArray>this.formGroupz.controls['truegrp']; 
    const addrCtrl = this.initextraField(); 
    control.push(addrCtrl); 
    } 
    addfalsefields() { 
    this.fieldIdentifier = "false"; 
    const control = <FormArray>this.formGroupz.controls['falsegrp']; 
    const addrCtrl = this.initextraField(); 
    control.push(addrCtrl); 
    } 
} 

Component.html

<div [formGroup]="formGroupz"> 
    <div class="tab-pane"> 
     <!--<button (click)="addiffields()">addIf</button>--> 
     <div class="panel panel-default m-b-10 m-t-0"> 
      <div class="panel-heading" style="padding: 5px 8px;background-color: #e1f5fe;"> 
       <span>if</span> 
       <span (click)="addiffields()" class="material-icons pull-right icon-panel">add_circle</span> 
      </div> 
      <div class="panel-body p-t-0 p-b-0" formArrayName="main"> 
       <div *ngFor="let maingroup of formGroupz.controls.main.controls; let i =index"> 
        <div [formGroupName]="i"> 
         <div *ngFor="let ifgroup of formGroupz.controls.ifgroup.controls; let i =index"> 
          <div [formGroupName]="i"> 
           <input type="text" formControlName="conditionfields"> 
          </div> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default m-b-10 m-t-0"> 
      <div class="panel-heading" style="padding: 5px 8px;background-color: #e1f5fe;"> 
       <span>True</span> 
       <span (click)="addtruefields()" class="material-icons pull-right icon-panel">add_circle</span> 
      </div> 
      <div class="panel-body p-t-0 p-b-0" formArrayName="main"> 
       <div *ngFor="let maingroup of formGroupz.controls.main.controls; let i =index"> 
        <div [formGroupName]="i"> 
         <div *ngFor="let trgrp of formGroupz.controls.truegrp.controls; let i =index"> 
          <div [formGroupName]="i"> 
           <input type="text" formControlName="conditionfields"> 
          </div> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default m-b-10 m-t-0"> 
      <div class="panel-heading" style="padding: 5px 8px;background-color: #e1f5fe;"> 
       <span>false</span> 
       <span (click)="addfalsefields()" class="material-icons pull-right icon-panel">add_circle</span> 
      </div> 
      <div class="panel-body p-t-0 p-b-0" formArrayName="main"> 
       <div *ngFor="let maingroup of formGroupz.controls.main.controls; let i =index"> 
        <div [formGroupName]="i"> 
         <div *ngFor="let flgrp of formGroupz.controls.falsegrp.controls; let i =index"> 
          <div [formGroupName]="i"> 
           <input type="text" formControlName="falsefields"> 
          </div> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
     {{formGroupz.value | json}} 
    </div> 
</div> 

Answer 1

您收到此錯誤，因爲當前的結構是象下面這樣：

formGroupz(FormGroup) 
    |----main(FormArray)    <------- mention here main is FormArray 
      |----ifgroup(FormArray) 
      |----truegrp(FormArray) 
      |----falsegrp(FormArray) 

如果您想要訪問子表格陣列ifgroup和同爲truegrp和falsegrp，你可以（爲模板，但沒有this相同的語法）通過下面的語法與formArray指數實現它：

this.formGroupz.get('main').controls[0].get('ifgroup') 
// or 
this.formGroupz.controls.main.controls[0].controls.ifgroup 

另外，還要確保你的模板被配對的形式結構。

參考Plunker Demo（固定模板表格結構）。

---

順便說一句，如果你不需要的第一層formArray，這裏是一個簡單的Plunker demo從而改變main到formGroup。