Comment obtenir le message d'erreur de validation de forme angulaire?

Vous devez d'abord vérifier si logRecipients.errors est vide, nul ou non défini ou non, puis vous recherchez les erreurs spécifiques.

modifiez donc votre code comme ci-dessous:

la ligne 14 a 2 changements:

1. la validation requise se trouve à l'intérieur de l'objet des erreurs, alors remplacez par .
2. vérifier l'objet d'erreurs lui-même, alors remplacez par

la ligne 17 a le même problème (vérifiez l'objet d'erreurs lui-même), remplacez * ngIf = "logRecipients.errors.logRecipientValidator" par * ngIf = "logRecipients. errors && logRecipients.errors.logRecipientValidator "

code de travail complet:

  <form #callTreeEditForm="ngForm" (ngSubmit)="onSubmit(callTreeEditForm)">
    <mat-form-field style="width:250px">
      <mat-label>Appreciation Log Recipients</mat-label>
      <textarea matInput
                cdkTextareaAutosize
                #autosize="cdkTextareaAutosize"
                cdkAutosizeMinRows="1"
                cdkAutosizeMaxRows="5"
                required
                name="logRecipients"
                #logRecipients="ngModel"
                logRecipientValidator
                [(ngModel)]="this.callTree.logRecipients"></textarea>
      <mat-error *ngIf="logRecipients.errors &&logRecipients.errors.required">
        Appreciation Log Recipients is <strong>required</strong>
      </mat-error>
      <mat-error *ngIf="logRecipients.errors && logRecipients.errors.logRecipientValidator">
        Invalid email address
      </mat-error>
    </mat-form-field>

  </form> 

J'espère que cette aide. :)

À un moment donné, logRecipients n'est pas défini, pour résoudre ce problème, il suffit de vérifier si cela est présent, puis de procéder à des vérifications de propriétés ultérieures sur cet objet.

  <mat-error *ngIf="logRecipients && logRecipients.required">
    Appreciation Log Recipients is <strong>required</strong>
  </mat-error>
  <mat-error *ngIf="logRecipients && logRecipients.errors && logRecipients.errors.logRecipientValidator">
    Invalid email address
  </mat-error>

il suffit d'utiliser angular déjà nous fournir ... opérateur d'expression de modèle (?) . Alors maintenant, vous vérifiez si la propriété est définie ou non en la rendant facultative.

<mat-error *ngIf="logRecipients?.errors?.logRecipientValidator">
    Invalid email address
</mat-error>

Désolé, j'ai oublié d'ajouter la directive à app.module.ts.

Et j'ai trouvé la solution comme ci-dessous:

  <mat-error *ngIf="logRecipients.hasError('required')">
    Appreciation Log Recipients is <strong>required</strong>
  </mat-error>
  <mat-error *ngIf="logRecipients.hasError('email')">
    Invalid email address
  </mat-error>

Le code de travail peut être accessible par l'URL suivante:

https://stackblitz.com/edit/angular-aidmpq?file=src%2Fapp%2Fapp.component.html

Je souhaite obtenir le résultat de mon validateur personnalisé pour décider si le message "Adresse e-mail non valide" s'affiche. En cas d'échec de la validation, mon validateur renverrait un objet {email: true}, comment puis-je lire cet attribut?

Je pense que vous êtes en train de le compliquer. Souvenez-vous de ce que vous avez défini dans TypeScript comme type de retour de la validation personnalisée

{[key: string]: any}

Ceci est javascript. Vous pouvez attacher n'importe quoi en tant que paire clé / valeur et récupérer cette référence de valeur à l'aide d'une chaîne pour la clé. Vous pouvez modifier la logique de la validation pour modifier le message en fonction de ce que vous voulez ou renvoyer quelque chose de entièrement nouveau. Assurez-vous simplement que votre modèle tient compte de tous les scénarios. Voici un exemple de retour d'un message à partir de la fonction de validation:

 <form #callTreeEditForm="ngForm" (ngSubmit)="onSubmit(callTreeEditForm)">
<mat-form-field style="width:250px">
  <mat-label>Appreciation Log Recipients</mat-label>
  <textarea matInput
            cdkTextareaAutosize
            #autosize="cdkTextareaAutosize"
            cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="5"
            required
            name="logRecipients"
            #logRecipients="ngModel"
            logRecipientValidator
            [(ngModel)]="this.callTree.logRecipients"></textarea>
  <mat-error *ngIf="logRecipients.hasError('required')">
    Appreciation Log Recipients is <strong>required</strong>
  </mat-error>
  <mat-error *ngIf="logRecipients.hasError('email')">
    {{logRecipients.errors['email']}}
  </mat-error>
</mat-form-field>

App.component.html

validate(control: AbstractControl): {[key: string]: any}|null {
if ((control.dirty) && (control.valid)) {
  const logRecipients = control.value.trim().split('\n');
  const tempBox = this.renderer2.createElement('input');
  let result = null;
  tempBox.type = 'text';

  for (const logRecipient of logRecipients) {
    tempBox.value = logRecipient;
    result = (Validators.email(tempBox));
    // console.log(logRecipient + ',' + result);
    if (result != null) {
      break;
    }
  }
  // console.log('Return :' + result);
  console.log(result);
  return {email: 'The email address is invalid. Custom Message'};
} else {
  // console.log('Return null');
  return null;
}

p>