Le meilleur moyen d'afficher des messages d'erreur pour les formulaires réactifs angular, un formulaire pour contrôler plusieurs erreurs de validation?

Question

J'affiche des messages d'erreur de forme réactive selon l'approche suggérée de angular exemple d'erreur de validation de forme angulaire .

code html pour afficher l'erreur sur la page:

<div [formGroup]="myForm">
  <div>
<input type="text" formControlName="firstName"/>
<div *ngIf="myForm.controls.firstName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.firstName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.firstName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  <div>
<input type="text" formControlName="lastName"/>
<div *ngIf="myForm.controls.lastName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.lastName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.lastName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  </div>

Juste pour la référence de mon code de composant ci-dessous:

this.myForm = this.formBuilder.group({
      firstName:['',[Validators.required,Validators.maxLength(50)]],
      lastName:['',[Validators.required,Validators.maxLength(50)]]
    })

Si vous voyez le code ci-dessus, j'ai appliqué deux validations sur mon champ firstName et lastName.

Pour afficher le message d'erreur, j'ai écrit plusieurs conditions * ngIf pour afficher le message d'erreur.

Existe-t-il un meilleur moyen d'afficher le message de validation d'un contrôle particulier sans écrire plusieurs conditions * ngIf?, Car le même code que j'écris encore et encore avec un nom de contrôle et un nom de validateur différents pour afficher le message d'erreur.

Answer 1

Si c'est un petit formulaire, j'utilise généralement beaucoup de *ngIf; cependant, une directive de validation personnalisée telle que mentionnée ci-dessus peut être utile si votre application nécessite presque entièrement des formulaires à valider.

Jetez un œil à la source pour voir comment les validateurs intégrés sont configurés. https://github.com/angular/angular/blob/2.0.0-rc.3/modules/%40angular/common/src/forms-deprecated/directives/validators.ts#L104-L124 =

Voici un exemple que j'ai déterré, mais je pense que c'est un peu exagéré pour la plupart des cas d'utilisation. Il suffit d'écrire une ligne * ngIf dans le modèle HTML, au lieu d'un tout nouveau @Attribute ...

https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2