Angular 2 Tidak dapat menemukan kontrol dengan atribut nama yang tidak ditentukan pada formArrays

Saya mencoba untuk mengulangi formArray di komponen saya tetapi saya mendapatkan kesalahan berikut

Error: Cannot find control with unspecified name attribute

Berikut adalah tampilan logikanya pada file kelas saya

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

dan file template saya

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

Hapus tanda kurung dari

[formArrayName]="areas" 

dan gunakan saja

formArrayName="areas"

Ini, karena dengan [ ]Anda mencoba untuk mengikat variabel , yang bukan ini. Perhatikan juga kiriman Anda, itu harus:

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

bukannya areasForm.values.

Dalam kasus saya, saya memecahkan masalah dengan meletakkan nama formControl dalam tanda kutip ganda dan sinlge sehingga itu ditafsirkan sebagai string:

[formControlName]="'familyName'"

mirip dengan di bawah ini:

formControlName="familyName"

Masalah bagi saya adalah apa yang saya miliki

[formControlName]=""

Dari pada

formControlName=""

Dari pada

formGroupName="i"

Anda harus menggunakan:

[formGroupName]="i"

Tips :

Karena Anda melakukan perulangan pada kontrol, Anda sudah memiliki variabelnya area, sehingga Anda dapat mengganti ini:

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

oleh:

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

Bagi saya, saya mencoba menambah [formGroupName]="i"dan / atau formControlNamedan lupa menentukan induknyaformArrayName . Perhatikan pohon grup formulir Anda.

Ini terjadi pada saya karena saya memiliki fromArrayNamebukan di formArrayNamesuatu tempat 😑

Ini terjadi pada saya karena saya membiarkan formControlName kosong ( formControlName=""). Karena saya tidak membutuhkan kontrol formulir ekstra itu, saya menghapusnya dan kesalahan telah teratasi.

Jadi, saya punya kode ini:

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

Di sini saya menggunakan formControl mandiri, dan saya mendapatkan kesalahan yang kita bicarakan, yang tidak masuk akal bagi saya, karena saya tidak bekerja dengan formgroups atau formarrays ... itu hanya menghilang ketika saya menambahkan * ngIf ke pilihan itu sendiri, jadi tidak digunakan sebelum itu benar-benar ada. Itulah yang memecahkan masalah dalam kasus saya.

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