Angular 4でネストされたリアクティブフォームを試しています。正常に動作していますが、AOTをビルドしようとするとエラーが発生します。
'controls' はタイプ 'AbstractControl' に存在しません
グーグルで検索していくつか試してみましたが、うまくいきませんでした。この問題を解決する方法を誰か教えてもらえませんか?
<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>
下記のTypescriptコード
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);
}
ベストアンサー1
@Günter Zöchbauerのコメントに基づいて、まず変更しました
myForm.controls['addresses']
myForm.get('addresses')
HTMLとTypescriptの両方で
そして@yuruziのコメントに基づいて
myForm.get('addresses').controls
に変更myForm.get('addresses')['controls']
今は問題なく動作しています。@gunter と yuruzi に感謝します。