1. ホーム
  2. angular

[解決済み] プロパティ 'controls' がタイプ 'AbstractControl' に存在しない Angular 4 [duplicate] 。

2022-10-26 04:04:16

質問

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>

以下、タイプスクリプトのコード

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);
}

どのように解決するのですか?

Günter Zöchbauerのコメントに基づいて、私は最初に変更しました。

myForm.controls['addresses']myForm.get('addresses') は、html と typescript の両方で

そして、@yuruzi さんのコメントに基づいて

を変更しました。 myForm.get('addresses').controlsmyForm.get('addresses')['controls']

これで正常に動作するようになりました。ありがとうございます。