需要添加从阵列内角阵列表格数组中

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。