Angular 2 Impossible de trouver le contrôle avec un attribut de nom non spécifié sur formArrays

J'essaie d'itérer sur un formArray dans mon composant mais j'obtiens l'erreur suivante

Error: Cannot find control with unspecified name attribute

Voici à quoi ressemble la logique sur mon fichier de classe

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

et mon fichier modèle

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

Retirez les supports de

[formArrayName]="areas" 

et n'utiliser que

formArrayName="areas"

Ceci, car avec [ ]vous essayez de lier une variable , ce qui n'est pas le cas. Notez également votre envoi, il devrait être:

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

au lieu de areasForm.values.

Dans mon cas, j'ai résolu le problème en mettant le nom du formControl entre guillemets doubles et sinlge afin qu'il soit interprété comme une chaîne:

[formControlName]="'familyName'"

similaire à ci-dessous:

formControlName="familyName"

Le problème pour moi était que j'avais

[formControlName]=""

Au lieu de

formControlName=""

Au lieu de

formGroupName="i"

Tu dois utiliser:

[formGroupName]="i"

Conseils :

Puisque vous bouclez sur les contrôles, vous avez déjà la variable area, vous pouvez donc la remplacer:

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

par:

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

Pour moi, je cherchais à ajouter [formGroupName]="i"et / ou formControlNameet oublier de spécifier le parentformArrayName . Faites attention à votre arborescence de groupes de formulaires.

Cela se passait pour moi parce que j'avais fromArrayNameau lieu de formArrayNamequelque part 😑

Cela m'est arrivé parce que j'ai laissé un formControlName vide ( formControlName=""). Comme je n'avais pas besoin de ce contrôle de formulaire supplémentaire, je l'ai supprimé et l'erreur a été résolue.

Donc, j'avais ce 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>

Ici, j'utilisais formControl autonome, et j'obtenais l'erreur dont nous parlons, ce qui n'avait aucun sens pour moi, car je ne travaillais pas avec formgroups ou formarrays ... cela a seulement disparu lorsque j'ai ajouté le * ngIf au select elle-même, elle n'est donc pas utilisée avant qu'elle n'existe réellement. C'est ce qui a résolu le problème dans mon cas.

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