web-dev-qa-db-fra.com

Comment afficher différents messages d'erreur en fonction de la saisie de l'utilisateur dans Angular 6

Je suis nouveau sur angular 6, je souhaite ici valider un champ de saisie utilisateur et afficher différents messages d'erreur en fonction de l'entrée donnée.

Dans mon projet, j'utilise Angular la conception de matériel pour l'interface utilisateur.

Ce que je veux faire c'est 

  • Si l'utilisateur clique sur le bouton Enregistrer, un message d'erreur sous la forme "Entrez votre nom FName" s'affiche.
  • Si l’utilisateur a touché mais n’a pas saisi quoi que ce soit et cliqué sur le bouton Enregistrer, un message d’erreur apparaît sous la forme "Entrez votre nom FName".
  • Si l'utilisateur a commencé à entrer un caractère, il devrait afficher un message d'erreur sous la forme "minimum 4 caractères requis"
  • Une fois que l'utilisateur a atteint 15 caractères, il devrait afficher un message d'erreur sous la forme "Maximum 20 caractères uniquement"
  • Si l'utilisateur saisit un caractère spécial, un espace ou autre, un message d'erreur sous la forme "Entrez uniquement des alphabets"

Maintenant, il passe à la couleur ROUGE lorsque l'entrée ne répond pas à la validation réussie. Cependant, je souhaite afficher un message d'erreur pour chaque validation dans le formulaireContrôle.

Ici, j'ai un mat-input-field.

<form [formGroup]="userAddressValidations" novalidate>
    <mat-form-field appearance="outline" class="col-sm-6">
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
    </mat-form-field>
</form>

<button mat-raised-button class="continueBtnHeight" color="warn">
<span>Save</span>
</button>

Fichier ts

export class ButtonToggleOverviewExample {
  userAddressValidations: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.userAddressValidations = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), Validators.pattern('[a-zA-Z]+')]]
    });

  }
}

stackblitz: https://stackblitz.com/edit/angular-t1k1x6-skowwq?file=app%2Fbutton-toggle-overview-example.ts

quelqu'un peut-il m'aider à résoudre ce problème?.

angulartypescriptangular-materialangular6
4
Zhu

Essaye ça:

<form class="example-form" [formGroup]="userAddressValidations">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="First Name" formControlName="firstName">
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('required')">
      First Name is Required!
    </mat-error>
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('minlength')">
      First Name should be atleast 4 characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('maxlength')">
      First Name can be atmax n characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('pattern')">
      First Name must follow this pattern!
    </mat-error>
  </mat-form-field>

</form>

Voici un Sample StackBlitz pour votre réf.

2
SiddAjmera

utilisez hasError('invalidName') si l'utilisateur entre un caractère ou un espace spécial

Stackblitz

Composant.html

<form [formGroup]="userAddressValidations">

    <label>User Name : 
        <input type="text"  formControlName="firstName">
    </label><br>

    <div class="errors" *ngIf="userAddressValidations.get('firstName').invalid && (userAddressValidations.get('firstName').touched || userAddressValidations.get('firstName').dirty)">

        <div *ngIf="userAddressValidations.get('firstName').hasError('required')">
            Please enter your FName
        </div>

        <div *ngIf="userAddressValidations.get('firstName').errors.minlength">
            minimum 4 char required
        </div>

        <div *ngIf="userAddressValidations.get('firstName').errors.maxlength">
            Maximum 20 char only
        </div>

        <div class="error-text" *ngIf="userAddressValidations.get('firstName').hasError('invalidName')">
            Enter only alphabets
        </div>
    </div>

</form>

Composant.ts

this.userAddressValidations = fb.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), usernameValidator]]
});

nomutilisateur.validators.ts

import { AbstractControl, ValidationErrors } from "@angular/forms"

export const usernameValidator = function (control: AbstractControl): ValidationErrors | null {

  let value: string = control.value || '';

  if (value) {
    const matches = value.match(/^[a-zA-Z]+$/);
    return matches ? null : { 'invalidName': true };
  } else {
    return null;
  }
}
1
Krishna Rathore

Jetez un coup d'œil à ce tutoriel https://codecraft.tv/courses/angular/forms/model-driven-validation , vous pouvez également faire référence à cette question de stackoverflow: Afficher l'erreur de validation personnalisée avec mat-error

Mais voici un petit exemple:

<form [formGroup]="userAddressValidations" novalidate>
    <mat-form-field appearance="outline" class="col-sm-6">
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
         <mat-error *ngIf="email.errors.required">{{getErrorMessage()}}</mat-error>
         <mat-error *ngIf="email.errors.minlength">{{getErrorMessage()}}</mat-error>
    </mat-form-field>
</form>
0
Patricio Vargas