Angular 2 Impossible de trouver le contrôle avec l'attribut name non spécifié sur formArrays

Question

J'essaye 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 de 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>
 

Answer 1

Retirez les crochets de

 [formArrayName]="areas" 
 

et utiliser seulement

 formArrayName="areas"
 

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

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

au lieu de areasForm.values .

Voici un

Démo

:)

Answer 2

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

 [formControlName]="'familyName'"
 

Answer 3

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

 [formControlName]=""
 

Au lieu de

 formControlName=""
 

Answer 4

Au lieu de

 formGroupName="i"
 

Tu dois utiliser:

 [formGroupName]="i"
 

Astuces

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

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

Pour:

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

En outre, vous n'avez pas besoin de mettre required sur input utilisant des formes réactives.

Answer 5

Cela se passait pour moi parce que j'avais fromArrayName au lieu de formArrayName quelque part