web-dev-qa-db-fra.com

Angular 4 validation de tableau

J'ai besoin d'aide pour la validation de formArray dans forme réactive. Je veux valider chaque élément du tableau, mais je ne sais pas comment faire. Merci.

code html:

    <label for="name">name:</label>
    <input formControlName="name" id="name" type="text">
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
       <div *ngIf="name.errors.required">
         required
       </div>
    </div>

Code TypeScript:

 createForm() {
    this.form = this.fb.group({
      person: this.fb.array([this.initItemRows()])
    });
  }

initItemRows() {
    return this.fb.group({
      name: [''],
      info: ['']
    });
  }

  addNewRow() {
    const control = <FormArray>this.form.controls['person'];
    control.Push(this.initItemRows());
  }

  deleteRow(index: number) {
    const control = <FormArray>this.form.controls['person'];
    control.removeAt(index);
  }

  get name() { return this.form.get('person.name'); }
  get info() { return this.form.get('person.info'); }

J'ai essayé ceci:

initItemRows() {
    return this.fb.group({
      name: ['', Validators.required ],
      info: ['', Validators.required ]
    });
  }

Ça ne marche pas ..

arraysformsangularvalidationangular-reactive-forms
8
Jiří Přibil

Vos getters pour name et info ne ciblent en fait pas les contrôles de formulaire spécifiques, car votre person est un formArray, par exemple this.form.get('person.name'); n'existe pas dans votre formulaire. Ce que vous devez faire, c'est utiliser l'itération pour chaque groupe de formulaires et cibler ce groupe avec ses contrôles, de sorte que votre modèle devrait ressembler à ceci:

<div *ngFor="let p of form.controls.person.controls; let i = index" 
             [formGroupName]="i">
  <label for="name">name:</label>
  <input formControlName="name" id="name" type="text">
  <!-- check if the name in this group has the error -->
  <div *ngIf="p.controls.name.dirty">
    <div *ngIf="p.hasError('required', 'name')">Required</div>  
  </div>
</div>

DÉMO

De plus, une suggestion est que vous pouvez raccourcir un peu votre code et supprimer une méthode qui n'est pas vraiment nécessaire pour initialiser/ajouter un groupe de formulaires à votre tableau, donc ici j'ai supprimé les addNewRow, initItemRows peut être appelé lorsque vous souhaitez ajouter une nouvelle ligne.

this.form = this.fb.group({
  person: this.fb.array([])
});
this.initItemRows();

initItemRows() {
  let ctrl = <FormArray>this.form.controls.person;
  ctrl.Push(this.fb.group({
    name: ['', Validators.required],
    info: ['', Validators.required]      
  }))
}
17
AJT82