プロパティ 'controls' は 'AbstractControl' 型に存在しません Angular 4 [重複] 質問する

プロパティ 'controls' は 'AbstractControl' 型に存在しません Angular 4 [重複] 質問する

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 に感謝します。

おすすめ記事