typescript - Thuộc tính 'controls' không tồn tại trên kiểu 'AbstractControl' Angular 4

Tôi đang thử một biểu mẫu phản ứng lồng nhau trong Angular 4. Nó hoạt động tốt nhưng khi tôi thử build AOT, nó lại gặp lỗi

'controls' không tồn tại trên kiểu 'AbstractControl'

Tôi đã tìm kiếm trên Google và thử vài cách nhưng không thành công. Có ai có thể chỉ cho tôi cách khắc phục vấn đề này không?

<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>

mã TypeScript bên dưới

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

Câu trả lời #1

Dựa trên nhận xét của @Günter Zöchbauer, lần đầu tiên tôi thực hiện thay đổi

myForm.controls['addresses'] thành myForm.get('addresses') trong cả html và typescript

và sau đó dựa trên bình luận của @yuruzi

đã thay đổi myForm.get('addresses').controls thành myForm.get('addresses')['controls']

Nó hoạt động tốt rồi. Cảm ơn @gunter & yuruzi

Câu trả lời số 2

Bạn có thể dễ dàng sửa nó. Hãy đưa logic "lấy các điều khiển" ra một phương thức trong mã thành phần của bạn (tệp .ts):

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

Trong mẫu, bạn có thể sử dụng:

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

Sự điều chỉnh này là cần thiết do cách TS hoạt động và Angular phân tích các mẫu của bạn (nó không hiểu TS ở đó).

Câu trả lời #3

Thay đổi myForm.get('addresses').controls thành myForm.get('addresses').value cũng sẽ khắc phục sự cố.

Câu trả lời #4

Như một cập nhật cho giải pháp của @sunny kashyap, tôi sẽ viết nó theo cách này:

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