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

90

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>
loops angular angular2-forms Bazinga777
quelle

Antworten:

144

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.

AJT82
quelle
Ist dein Plunkr kaputt?
Jess
2
und doch ist [FormGroup] = "areaForm" richtig? Angular tritt mir wirklich in die Hose ....
Greg
Die geschweiften Klammern waren das Problem in meinem Fall mit dem formGroupName
Luis Contreras
2
@greg spät zu kommentieren ... [formGroup]="areasForm"ist korrekt, da areasFormes sich um eine Variable in Ihrer Komponente TS handelt, während dies areasnicht der Fall ist. Es ist Eigentum der areasForm:)
AJT82
17

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"
Tobias Gassmann
quelle
8

Das Problem für mich war, dass ich hatte

[formControlName]=""

Anstatt 

formControlName=""
smac89
quelle
1
Ich musste von [formControl] zu formControlName wechseln
danilo
7

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')"
Entwickler033
quelle
Danke, das schien Teil des Problems zu sein, aber die obige Antwort löste mein Problem.
Bazinga777
3

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

Jacob Stamm
quelle
1
! @ # $ 🤦🤦🤦🤦🤦
wal
1
@wal Hattest du das gleiche Problem?
Jacob Stamm
1
Ja, ich überprüfte auch für diesen Tippfehler nach der Antwort zu lesen , aber es verpasst den ersten Mal
wal
1
Heilige Kuh Ich hatte "formArraryName" und du hast mir so viel Zeit gespart.
Ashley
3

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

Giovannipds
quelle
1
Ich habe auch beide benutzt. Denken Sie daran , die setzen formArrayNameauf einem DOM-Elemente nach oben in der Hierarchie höher als [formGroupName]="i"(zB auf dem Schleifenelement: <div *ngFor=let ctrl of formArrayCtrl; let i = index"><div [formGroupName]="i"></div></div>)
John
0

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.

Stephanie McNaught
quelle
0

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