web-dev-qa-db-fra.com

Angular 5 - e-mail de validation du formulaire

je veux résoudre ce problème: Angular 5 - formulaire basé sur un modèle

Un champ de saisie a le type email. Exemple:

<input type="email" [(ngModel)]="model.email" #email="ngModel" email />

Je veux valider ce champ. Mais cela ne devrait pas être un champ obligatoire. La validation ne devrait commencer que si elle n'est pas vide. Si le champ est vide, tout va bien. Sinon, un message d'erreur devrait s'afficher jusqu'à ce que l'adresse e-mail soit correcte.

Cela ne fonctionne pas vraiment:

*ngIf="email.untouched && email.invalid"

Alors, comment puis-je valider le champ email? Je manque un statut comme "pas vide".

Un indice?

angularangular4-forms
9
HansPeter

Vous pouvez simplement passer une condition supplémentaire dans la directive ngIf pour vérifier si la valeur actuelle de l'entrée est une chaîne vide.

*ngIf="email.value !== '' && email.untouched && email.invalid"

4
Mateusz Witkowski

Utilisez l'attribut pattern avec une expression régulière pour la validation du courrier électronique.

 <div class="form-group">
        <label for ="email">Email</label>
          <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="email"name="email" ngModel #emailref="ngModel">
          <div *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" class ="aler alert-danger">
           <div [hidden]="!emailref.errors?.pattern">
             Invalid pattern
           </div> 
          </div> 
    </div>
25
Vikas

Pour Angular 8 versions il existe un validateur de courrier électronique intégré disponible.

En variable de classe de composant

email= new FormControl('',[
    Validators.required,
    Validators.email
  ]);

Dans le composant html

 <input type="email" [formControl]="email" class="form-control" id="email" required>
                    <div *ngIf="email.invalid && (email.dirty || email.touched)"
                    class="alert alert-danger">
                        <div *ngIf="email.errors.required">
                            Email is required.
                        </div>  
                        <div *ngIf="email.errors.email">
                            Please enter a valid email.
                        </div>                                               
                    </div>
1
Krishnadas PC

Je l'utilise dans Angular 6+ et cela a fonctionné pour moi.

Utilisez le motif ci-dessous dans un fichier TypeScript.

this.validations_form = this.formBuilder.group({
    email: new FormControl('', Validators.compose([
           Validators.required,
           Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
    ]))
});
0
Ajay Gupta

J'ai essayé dans angular 7

Le code ci-dessous en html fonctionne pour moi

<input type="email" class="form-control center-ele"
    [(ngModel)]="recruiter_mail" id="rmail"
    name="recriter_mail"
    pattern="[email protected]" size="30"
    #email="ngModel"
    [ngClass]="{ 'is-invalid': f.submitted && email.invalid }"
    required email
/>

<div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
    <div *ngIf="email.errors.required">Email is required</div>
    <div *ngIf="email.errors.email">Email must be a valid email address</div>
</div>
0
Ram

Vikas a donné une excellente réponse! travaillant instantanément dans le programme, mais la console génère des erreurs si vous tapez/manipulez d’autres champs du formulaire (même si ils fonctionnent toujours), je modifie donc #variable emailref en email, comme ceci:

<div class="form-group">
  <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" 
         id="email" name="email" ngModel #email="ngModel" placeholder="Email">
  <div *ngIf="email.errors &&(email.touched || email.dirty)" class="aler alert-danger">
    <div [hidden]="!email.errors?.pattern">
      Invalid pattern
    </div>
  </div>
</div>

Donc, attribut de champ name="email" sera identique à la variable de modèle #email.

0
avivsab