需要在angular 2中从数组内部添加表单数组

我试图在formgroup表单中添加动态字段，其中我需要在from数组中添加formarray，在该formgroup表单中，我已经尝试了，但遇到以下错误

error_handler.js:54异常：./AppComponent类AppComponent-内联模板中的错误：6:16原因：无法读取未定义的属性“push”

请帮我解决这个问题，谢谢

这是你的电话号码

组件。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);
  }
}

从'@angular/core'导入{Component}；
从“@angular/forms”导入{FormGroup、FormBuilder、FormArray、ReactiveFormsModule}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
公共formGroupz:FormGroup；
构造函数（私有frmbldr:FormBuilder）{}
专用字段标识符：任意；
项目：任何[]=[]；
恩戈尼尼特（）{
//在构造函数之后调用，初始化输入属性，第一次调用ngOnChanges。
//将“implements OnInit”添加到类中。
this.formGroupz=this.frmbldr.group({
main:this.frmbldr.array（[this.initRules（）]））
})
}
initRules（）{
返回此.frmbldr.group({
ifgroup:this.frmbldr.array（[]），
truegrp:this.frmbldr.array（[]），
falsegrp:this.frmbldr.array（[]）
})
}
ifFields（）{
调试器
返回此.frmbldr.group({
条件字段：['']
})
}
initextraField（）{
调试器
if（this.fieldIdentifier==“true”）{
返回此.frmbldr.group({
truefields:['']
})
}
else if（this.fieldIdentifier==“false”）{
返回此.frmbldr.group({
假字段：['']
})
}
}
addiffields（）{
调试器
this.fieldIdentifier=“if”；
const control=this.formGroupz.controls['main']['controls']['ifgroup']；
const addrCtrl=this.ifFields（）；
控制按钮（addrCtrl）；
}
addtruefields（）{
调试器
this.fieldIdentifier=“true”；
const control=this.formGroupz.controls['truegrp']；
const addrCtrl=this.initextraField（）；
控制按钮（addrCtrl）；
}
addfalsefields（）{
this.fieldIdentifier=“false”；
const control=this.formGroupz.controls['falsegrp']；
const addrCtrl=this.initextraField（）；
控制按钮（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>

如果
加上一个圆圈
真的
加上一个圆圈
假的
加上一个圆圈
{{formGroupz.value | json}}

由于当前结构如下所示，因此出现此错误：

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

还要确保模板与表单结构匹配

请参阅（固定模板表单结构）

---

---

顺便说一句，如果您不需要第一层formArray，这里有一个更简单的，它将

main

更改为

formGroup

，您会遇到此错误，因为您当前的结构如下所示：

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

还要确保模板与表单结构匹配

请参阅（固定模板表单结构）

---

---

顺便说一句，如果你不需要第一层阵列，这里有一个更简单的，它将

main

更改为

formGroup

您在哪里调用函数

initRules

？@Pengyy现在检查它我已经更新了代码您在哪里调用函数

initRules

？@Pengyy现在检查它我已经更新了代码我无法找到带有路径错误的控件，当我将您的plunkr应用于我的代码时，它工作正常error@MBalajivaishnav您必须遵循组件中定义的结构。并一步一步地访问子表单。顺便说一下，如果我的答案解决了你的问题，请考虑接受它。我无法找到路径错误的控制，当我应用到我的代码时，你的Spulkr工作正常。error@MBalajivaishnav您必须遵循组件中定义的结构。并一步一步地访问子表单。顺便说一下，如果我的回答解决了你的问题，请考虑接受。