Angular 2 Form 错误：path.split 不是 <FormArray>this.myForm.get(i) 处的函数答案

【问题标题】：Angular 2 Form Error : path.split is not a function at <FormArray>this.myForm.get(i)Angular 2 Form 错误：path.split 不是 <FormArray>this.myForm.get(i) 处的函数
【发布时间】：2017-04-10 18:01:25
【问题描述】：

尝试在 Angular 2 中制作嵌套的动态表单。

形成骨架

this.myForm= this.formBuilder.group({
        programmes: this.formBuilder.array([this.initProgramme(),]),
    });

initProgramme() {
        return this.formBuilder.group({
            tickets: this.formBuilder.array([this.initTicket(),])
        });
    }


initTicket() {
        return this.formBuilder.group({
            field1:''
        });
    }

使用以下功能动态添加程序作品：-

addProgToForm(){

    const control = <FormArray>this.myForm.get('programmes');
        control.push(this.initProgramme());
  }

添加票证到程序抛出错误

addTicket(programme: any) {
        const control = (<FormArray>this.myForm.get('programmes')).get(programme); // THROWS ERROR  HERE
         (<FormArray>control.get('tickets')).push(this.initTicket());
    }

在 .get(programme) 它说 path.split 不是函数

PS - 'get(programme)' 中的 program 是要添加动态票证的 Program Form Array 的索引。它是从 *ngFor 正确检索的。示例：- 添加第一个程序的索引 0。

【问题讨论】：

标签： angular angular2-forms angular2-formbuilder

【解决方案1】：

addresses: FormArray;
DynForm: FormGroup;

this.DynForm = formBuild.group({
    firstname: 'Krishna',
    lastName: '',
    addresses: this.address1(),
    Gender: 'Male'
});

address1(): FormArray{
    this.addresses = this.formBuild.array([
        this.addGroup()
    ]);
    return this.addresses;
}

addGroup(): FormGroup {
    return this.formBuild.group({
        Street: '',
        Zip: '',
        Country: 'India'
    });
}

add() {
    this.addresses.push(this.addGroup());
}

请在 angular2 最终版本中尝试step ===== !

【讨论】：

不应该是this.DynForm.addresses.push(this.addGroup());而不是 this.addresses.push(this.addGroup()); ?我可以推送到 1 级数组（即地址组），但我在这个地址组中有另一个嵌套数组，无法访问和推送。

【解决方案2】：

尝试通过字符串索引获取控制：.get(programme.toString())

addTicket(programme: any) {
    const control = (<FormArray>this.myForm.get('programmes')).get(programme.toString());
     (<FormArray>control.get('tickets')).push(this.initTicket());
}

【讨论】：

【解决方案3】：

见https://v8.angular.io/api/forms/AbstractControl#get

.get([programme])

如果程序是一个数字，这是要走的路。

【讨论】：