web-dev-qa-db-fra.com

Angular Erreurs de validation d'affichage FormArray

J'ai un formulaire Angular qui est construit avec l'aide de FormBuilder.

Form contient un FormArray qui contient autant de champs que l'utilisateur le souhaite. J'ai mis un validateur pour les champs

this.fb.array([this.fb.control('', Validators.required)])

et pour chaque nouveau validateur Push est le même.

Le problème est que je ne sais pas comment accéder à la propriété isValid d'un champ spécifique car ils sont liés avec FormControl via [formControlName]="index".

J'ai essayé de le faire de cette façon, mais cela ne semble pas fonctionner

<div *ngIf="array.at(index).invalid" class="alert alert-danger p-2">
</div>

Où array est un formArray.controls transmis par un parent.

Mise à jour # 1

Il y a un cas https://stackblitz.com/edit/angular-7ppkoh

angularformstypescriptvalidationangular2-form-validation
12
Sergey

J'ai cet exemple dans angular 8.

Dans votre modèle lorsque vous faites cela.

<ng-container formArrayName="calibers">
        <ng-container *ngFor="let item of qualityForm.get('calibers')['controls']; let index = index" [formGroupName]="index.toString()">
          <ion-item>
            <ion-label position="floating">{{ getCaliberName(item) }}</ion-label>
            <ion-input formControlName="percentage" placeholder="Input Percentage" type="number" clearInput></ion-input>
            <ng-container *ngIf="item.get('percentage').hasError('required')">
              <span class="errorMsg">Input Percentage</span>
            </ng-container>
            <ng-container *ngIf="item.get('percentage').hasError('max')">
              <span class="errorMsg">Percentage cannot be greater than 100</span>
            </ng-container>
          </ion-item>
        </ng-container>
      </ng-container>

Cet objet item dans le ngFor vous donnera accès au contrôle de formulaire. tout ce que vous devez faire pour obtenir les erreurs de forme du tableau est item.get('percentage').hasError('required')

1
Luis Contreras

Vous devez utiliser des contrôles de formulaire pour y parvenir de manière nette.

<div *ngIf="formGroup.get('features').controls[i].controls.index.invalid && (formGroup.get('features').controls[i].controls.index.dirty || formGroup.get('features').controls[i].controls.index.touched)"                                          class="text-center error">
<p [hidden]="!formGroup.get('features').controls[i].controls.index.errors.required">Index is required.</p>
</div>
0
BabuRaj Thirumalai

Comme ci-dessus, répondez en utilisant

feature.invalid de features.controls

vous permet de valider tous les éléments à l'intérieur de ce contrôle une fois.

Cependant si vous souhaitez valider un élément spécifique pouvez-vous le code suivant:

> feature.controls.controlname.invalid

Remarque: j'utilise des fonctionnalités et non des fonctionnalités

0
Mujthaba Ibrahim

La classe FormGroup a une méthode get qui renvoie le abstractControl pour la clé donnée. Celui que vous utilisez dans formControlName.

Voici les liens pour les deux documents Api:
AbstractControl
FormGroup

<form [formGroup]="form">
  <input formControlName="name" type="text" />
  <div *ngIf="form.get('name').invalid">
    <p><Message you like to show/p>
  </div>
</form>
0
Marlaqk