Angular 2 Không thể tìm thấy điều khiển có thuộc tính tên không xác định trên formArrays

Tôi đang cố gắng lặp lại formArray trong thành phần của mình nhưng tôi gặp lỗi sau

Error: Cannot find control with unspecified name attribute

Đây là logic trông như thế nào trên tệp lớp của tôi

export class AreasFormComponent implements OnInit {
    public initialState: any;
    public areasForm: FormGroup;

    constructor(private fb: FormBuilder) { }

    private area(): any {
      return this.fb.group({
          name: ['', [Validators.required]],
          latLong: ['', [Validators.required]],
          details: ['', [Validators.required]]
      });
    }

    public ngOnInit(): void {
        this.areasForm = this.fb.group({
            name: ['', [Validators.required]],
            areas: this.fb.array([this.area()])
        });
    }
}

và tệp mẫu của tôi

<form class="areas-form" [formGroup]="areasForm" (ngSubmit)="onSubmit(areasForm.values)">
    <md-input-container class="full-width">
        <input mdInput placeholder="Location Name" type="text" formControlName="name" required>
        <md-error *ngIf="areasForm.get('name').hasError('required')">Please enter the locationName</md-error>
    </md-input-container>
    <md-grid-list cols="1" [formArrayName]="areas">
        <md-grid-tile formGroupName="i"  colspan="1" rowHeight="62px" *ngFor="let area of areasForm.controls.areas.controls; let i = index ">
            <md-grid-list cols="3" rowHeight="60px">
                <md-grid-tile colspan="1">
                    <md-input-container class="full-width">
                        <input mdInput placeholder="Area Name" type="text" formControlName="name" required>
                        <md-error *ngIf="areasForm.get('areas').controls[i].name.hasError('required')">Please enter the area name</md-error>
                    </md-input-container>
                </md-grid-tile>
                <md-grid-tile colspan="1">
                    <md-input-container class="full-width">
                        <input mdInput placeholder="details" type="text" formControlName="details" required>
                        <md-error *ngIf="areasForm.get('areas').controls[i].name.hasError('required')">Please enter the locationName</md-error>
                    </md-input-container>
                </md-grid-tile>
                <md-grid-tile colspan="1">
                    <button md-fab (click)="remove(i)"><md-icon>subtract</md-icon>Remove Area</button>
                </md-grid-tile>
            </md-grid-list>
        </md-grid-tile>
    </md-grid-list>
    <button type="submit" [disabled]="areasForm.invalid" md-raised-button color="primary">Submit</button>
</form>

Xóa dấu ngoặc khỏi

[formArrayName]="areas" 

và chỉ sử dụng

formArrayName="areas"

Điều này, bởi vì [ ]bạn đang cố gắng ràng buộc một biến , điều này không phải vậy. Ngoài ra, hãy lưu ý gửi của bạn, nó phải là:

(ngSubmit)="onSubmit(areasForm.value)"

thay vì areasForm.values.

Trong trường hợp của tôi, tôi đã giải quyết vấn đề bằng cách đặt tên của formControl trong dấu ngoặc kép và sinlge để nó được hiểu là một chuỗi:

[formControlName]="'familyName'"

tương tự như bên dưới:

formControlName="familyName"

Vấn đề đối với tôi là tôi đã

[formControlName]=""

Thay vì

formControlName=""

Thay vì

formGroupName="i"

Bạn phải dùng:

[formGroupName]="i"

Lời khuyên :

Vì bạn đang lặp lại các điều khiển, bạn đã có biến area, vì vậy bạn có thể thay thế điều này:

*ngIf="areasForm.get('areas').controls[i].name.hasError('required')"

bởi:

*ngIf="area.hasError('required', 'name')"

Đối với tôi, tôi đã cố gắng để thêm [formGroupName]="i"và / hoặc formControlNamevà quên để xác định cha mẹformArrayName . Chú ý đến cây nhóm biểu mẫu của bạn.

Điều này đã xảy ra với tôi bởi vì tôi đã fromArrayNamethay vì formArrayNameở đâu đó 😑

Điều này xảy ra với tôi vì tôi để trống formControlName ( formControlName=""). Vì tôi không cần kiểm soát biểu mẫu bổ sung đó, tôi đã xóa nó và lỗi đã được giải quyết.

Vì vậy, tôi đã có mã này:

<div class="dropdown-select-wrapper" *ngIf="contentData">
    <button mat-stroked-button [disableRipple]="true" class="mat-button" (click)="openSelect()" [ngClass]="{'only-icon': !contentData?.buttonText?.length}">
      <i *ngIf="contentData.iconClassInfo" class="dropdown-icon {{contentData.iconClassInfo.name}}"></i>
      <span class="button-text" *ngIf="contentData.buttonText">{{contentData.buttonText}}</span>
    </button>
    <mat-select class="small-dropdown-select" [formControl]="theFormControl" #buttonSelect (selectionChange)="onSelect(buttonSelect.selected)" (click)="$event.stopPropagation();">
      <mat-option *ngFor="let option of options" [ngClass]="{'selected-option': buttonSelect.selected?.value === option[contentData.optionsStructure.valName]}" [disabled]="buttonSelect.selected?.value === option[contentData.optionsStructure.valName] && contentData.optionSelectedWillDisable" [value]="option[contentData.optionsStructure.valName]">
        {{option[contentData.optionsStructure.keyName]}}
      </mat-option>
    </mat-select>
  </div>

Ở đây tôi đang sử dụng formControl độc lập và tôi đang gặp lỗi mà chúng tôi đang nói đến, điều này không có ý nghĩa gì đối với tôi, vì tôi không làm việc với các nhóm biểu mẫu hoặc biểu mẫu ... nó chỉ biến mất khi tôi thêm * ngIf vào lựa chọn nó tự, vì vậy không được sử dụng trước khi nó thực sự tồn tại. Đó là những gì đã giải quyết vấn đề trong trường hợp của tôi.

<mat-select class="small-dropdown-select" [formControl]="theFormControl" #buttonSelect (selectionChange)="onSelect(buttonSelect.selected)" (click)="$event.stopPropagation();" *ngIf="theFormControl">
          <mat-option *ngFor="let option of options" [ngClass]="{'selected-option': buttonSelect.selected?.value === option[contentData.optionsStructure.valName]}" [disabled]="buttonSelect.selected?.value === option[contentData.optionsStructure.valName] && contentData.optionSelectedWillDisable" [value]="option[contentData.optionsStructure.valName]">
            {{option[contentData.optionsStructure.keyName]}}
          </mat-option>
        </mat-select>