Winkel 2 In formArrays kann keine Steuerung mit nicht angegebenem Namensattribut gefunden werden

Ich versuche, ein formArray in meiner Komponente zu durchlaufen, erhalte jedoch den folgenden Fehler

Error: Cannot find control with unspecified name attribute

So sieht die Logik in meiner Klassendatei aus

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

und meine Vorlagendatei

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

Entfernen Sie die Halterungen von

[formArrayName]="areas" 

und nur verwenden

formArrayName="areas"

Dies liegt daran, dass [ ]Sie versuchen, eine Variable zu binden , was dies nicht ist. Beachten Sie auch Ihre Übermittlung, es sollte sein:

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

statt areasForm.values.

In meinem Fall habe ich das Problem gelöst, indem ich den Namen des formControl in doppelte und einzelne Anführungszeichen gesetzt habe, damit es als Zeichenfolge interpretiert wird:

[formControlName]="'familyName'"

ähnlich wie unten:

formControlName="familyName"

Das Problem für mich war, dass ich hatte

[formControlName]=""

Anstatt

formControlName=""

Anstatt

formGroupName="i"

Sie müssen verwenden:

[formGroupName]="i"

Tipps :

Da Sie die Steuerelemente durchlaufen, haben Sie bereits die Variable area, sodass Sie diese ersetzen können:

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

durch:

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

Das passierte für mich, weil ich fromArrayNamestatt formArrayNameirgendwo hatte 😑

Für mich habe ich versucht , hinzuzufügen [formGroupName]="i"und / oder formControlNameund zu vergessen die Eltern zu spezifizierenformArrayName . Achten Sie auf Ihren Formulargruppenbaum.

Dies ist mir passiert, weil ich einen formControlName leer gelassen habe ( formControlName=""). Da ich dieses zusätzliche Formularsteuerelement nicht benötigte, habe ich es gelöscht und der Fehler wurde behoben.

Also hatte ich diesen Code:

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

Hier habe ich eigenständiges formControl verwendet und den Fehler erhalten, über den wir sprechen, der für mich keinen Sinn ergab, da ich nicht mit Formulargruppen oder Formarrays gearbeitet habe. Er verschwand nur, als ich der Auswahl das * ngIf hinzufügte es selbst, wird also nicht verwendet, bevor es tatsächlich existiert. Das hat das Problem in meinem Fall gelöst.

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