3
votes

Comment valider une adresse e-mail à partir d'une entrée de tapis? (Matériau angulaire)

Comment puis-je valider une adresse e-mail pour avoir un signe @ et un point sans appuyer sur un bouton, sans formulaire. J'apprécierais toute aide.

<mat-form-field class="example-full-width">
  <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

angular

1 commentaires

stackoverflow.com/ questions / 46155 /…

3 Réponses :

13
votes

Vous pouvez utiliser un modèle et définir une expression régulière pour valider l'adresse e-mail,

<input matInput placeholder="Favorite food" [(ngModel)]="enterEmail" name="myEmail" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>

1 commentaires

connaissez-vous un moyen d'ajouter un message à cela? sans avoir à le déclarer avec une balise formcontrol

2
votes

J'utilise Angular 8 et il a la directive EmailValidator .

Utilisation avec ngModel comme ceci:

<input type="email" name="email" ngModel email>
<input type="email" name="email" ngModel email="true">
<input type="email" name="email" ngModel [email]="true">

0 commentaires

0
votes

Vous pouvez également valider de cette manière

Dans votre modèle (fichier .html):

userForm = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email]),
});

Dans votre composant (fichier .ts):

<form
  [formGroup]="userForm"
  #formDirective="ngForm"
  (ngSubmit)="onFormSubmit()"
>
  <div class="form-control">
    <mat-form-field appearance="outline" class="form-field">
      <mat-label>Email Address</mat-label>
      <input
        type="text"
        matInput
        formControlName="email"
        class="form-input-field"
        pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"
      />
      <mat-error *ngIf="userForm.get('email').hasError('required')"
        >Email is required</mat-error
      >
      <mat-error *ngIf="userForm.get('email').hasError('email')"
        >Please enter a valid email address
      </mat-error>
    </mat-form-field>
  </div>
</form>

0 commentaires