web-dev-qa-db-fra.com

Angular 7: "Impossible de trouver le contrôle avec l'attribut Nom non spécifié"

Je crée ma première Angular et je reçois les erreurs suivantes en mode Dev Mode Console:

Erreur d'erreur: "Impossible de trouver le contrôle avec l'attribut Nom non spécifié"

Erreur d'erreur: "Impossible de trouver le contrôle avec le chemin:" éléments -> nom ""

Erreur d'erreur: "Impossible de trouver le contrôle avec le chemin:" Articles -> Hauteur ""

J'ai lu plusieurs SO réponses (comme ceci , ceciCeci et ceci ) mais je ne peux pas identifier Ce que je fais mal, mon inexpérience avec Angular= ne vous aide pas aussi.

Ceci est mon composant code dossier:

import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-pack-input',
  templateUrl: './pack-input.component.html',
  styleUrls: ['./pack-input.component.css']
})
export class PackInputComponent implements OnInit {
  public boxForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {  }

  ngOnInit() {
    this.boxForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createBox()])
    });
  }

  createBox(): FormGroup {
    return this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      height: ['', [Validators.required, Validators.minLength(3)]],
      width: ['', [Validators.required, Validators.minLength(3)]],
      length: ['', [Validators.required, Validators.minLength(3)]],
      weight: ['', [Validators.required, Validators.minLength(3)]]
    });
  }

  get items(): FormArray {
    return this.boxForm.get('items') as FormArray;
  }

  addItem(): void {
    this.items.Push(this.createBox());
  }

  public onSubmit(formValue: any) {
    console.log(formValue);
  }
}

Et voici mon code de composant HTML:

<div>
  <div class="row">
    <h3>Set the box size in meters</h3>
  </div>
  <form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" >
    <div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" [formGroupName]="i" style="margin-bottom: 10px">
      <div class="form-group">
          <div class="col-sm-5 form-group">
            <label for="name">Name</label>
            <input class="form-control" type="text" formControlName="name" placeholder="Name" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Height</label>
            <input class="form-control" type="text" formControlName="height" placeholder="Height" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Width</label>
            <input class="form-control" type="text" formControlName="width" placeholder="Width" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Length</label>
            <input class="form-control" type="text" formControlName="length" placeholder="Length"/>
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Weight</label>
            <input class="form-control" type="text" formControlName="weight" placeholder="Weight" />
          </div>
        <hr>
      </div>
    </div>
    <button class="btn btn-success" type="submit"  style="margin-right: 10px">Pack</button>
    <button class="btn btn-primary" type="button" (click)="addItem()">New Box</button>
  </form>
</div>

Je ne vois aucune faute de frappe dans le formControlName="name" et formControlName="height" Dans le code dossier. Je suis totalement perdu.

Qu'est-ce que je fais mal ici?

angulartypescriptangular-componentsangular-formsangular-formbuilder
7
dazito

Essayez de déclarer votre formulaireGroupName une couche plus bas, comme:

<div>
  <div class="row">
    <h3>Set the box size in meters</h3>
  </div>
  <form [formGroup]="boxForm" (ngSubmit)="onSubmit(boxForm.value)" >
    <div class="row" formArrayName="items" *ngFor="let item of items.controls; let i = index;" style="margin-bottom: 10px">
      <div class="form-group" [formGroupName]="i">
          <div class="col-sm-5 form-group">
            <label for="name">Name</label>
            <input class="form-control" type="text" formControlName="name" placeholder="Name" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Height</label>
            <input class="form-control" type="text" formControlName="height" placeholder="Height" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Width</label>
            <input class="form-control" type="text" formControlName="width" placeholder="Width" />
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Length</label>
            <input class="form-control" type="text" formControlName="length" placeholder="Length"/>
          </div>
          <div class="col-sm-3 form-group">
            <label for="name">Weight</label>
            <input class="form-control" type="text" formControlName="weight" placeholder="Weight" />
          </div>
        <hr>
      </div>
    </div>
    <button class="btn btn-success" type="submit"  style="margin-right: 10px">Pack</button>
    <button class="btn btn-primary" type="button" (click)="addItem()">New Box</button>
  </form>
</div>
1
Linh