类型'AbstractControl'Angular 4上不存在属性'controls'

Question

我在Angular 4中尝试嵌套的反应形式.它工作正常但是当我尝试构建AOT时它会抛出错误

'AbstractControl'类型上不存在'controls'

我用Google搜索并尝试了一些事情,但没有运气.谁能告诉我如何解决这个问题？

<div [formGroup]="myForm">
    <div formArrayName="addresses">
        <div *ngFor="let address of myForm.get('addresses').controls; let i=index" 
                    class="panel panel-default">
            <span *ngIf="myForm.get('addresses').length > 1"
                    (click)="removeAddress(i)">Remove</span>
            <div [formGroupName]="i">
                <mat-form-field>
                    <input matInput formControlName="city" placeholder="city" value="">
                </mat-form-field>
            </div>

        </div>
    </div>
    <a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>

下面的打字稿代码

constructor(private _fb: FormBuilder) {     
}

ngOnInit() {
    this.myForm = this._fb.group({
        addresses: this._fb.array([
            this.initAddress(),
        ])
    });
}
initAddress() {
    return this._fb.group({
        city: ['']
    });
}
addAddress() {
    const control = <FormArray>this.myForm.get('addresses');
    control.push(this.initAddress());
}
removeAddress(i: number) {
    const control = <FormArray>this.myForm.get('addresses');
    control.removeAt(i);
}

Answer 1

基于@GünterZöchbauer评论,首先我改变了

myForm.controls['addresses']以myForm.get('addresses')HTML和打字稿

然后基于@yuruzi评论

变成myForm.get('addresses').controls了myForm.get('addresses')['controls']

它的工作正常.谢谢@gunter&yuruzi

Answer 2

您可以轻松解决它。将“获取控件”逻辑外包到组件代码（.ts文件）的方法中：

getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}

然后，您可以在模板中使用：

*ngFor="let ingredientCtrl of getControls(); let i = index"

由于TS的工作方式和Angular解析您的模板（此处不了解TS），因此需要进行此调整。

Answer 3

更改myForm.get('addresses').controls为myForm.get('addresses').value也将解决该问题。

Answer 4

作为对@sunny kashyap 解决方案的更新，我会这样写：

getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}