web-dev-qa-db-fra.com

Validateur de courrier générique dans Angular2

Je souhaite créer un formulaire dans lequel l'utilisateur entrera dans son courrier .. Je souhaite valider le format du courrier côté client .. Il existe-t-il un validateur de courrier générique dans Angular2?

NB: Quelque chose de semblable au validateur angularjs: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

angulartypescriptangular2-forms
41
Julien Alary

Pour ce faire, vous pouvez utiliser les directives de formulaire et le contrôle.

export class TestComponent implements OnInit {
     myForm: ControlGroup;
     mailAddress: Control;

     constructor(private builder: FormBuilder) {
         this.mailAddress = new Control(
            "",
            Validators.compose([Validators.required, GlobalValidator.mailFormat])
        );
     }

     this.addPostForm = builder.group({
            mailAddress: this.mailAddress
     });
}

Importation:

import { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from 'angular2/common';

Ensuite, votre classe GlobalValidator:

export class GlobalValidator {

    static mailFormat(control: Control): ValidationResult {

        var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "incorrectMailFormat": true };
        }

        return null;
    }  
}

interface ValidationResult {
    [key: string]: boolean;
}

Et ensuite votre HTML:

<div class="form-group">
    <label for="mailAddress" class="req">Email</label>
    <input type="text" ngControl="mailAddress" />
    <div *ngIf="mailAddress.dirty && !mailAddress.valid" class="alert alert-danger">
        <p *ngIf="mailAddress.errors.required">mailAddressis required.</p>
        <p *ngIf="mailAddress.errors.incorrectMailFormat">Email format is invalid.</p>
    </div>
</div>

Pour plus d'informations à ce sujet, vous pouvez lire ce bon article: https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg ou consulter ce projet github pour un travail Exemple .

(edit: ce reg ex ne semble pas rechercher un point dans le domaine

J'utilise celui-ci à la place

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

cfr http://emailregex.com/

42
AdrienTorris

Vous pouvez faire seulement en utilisant HTML:

<md-input-container class="md-icon-float md-block" flex-gt-sm>
    <label>Email</label>
        <input md-input
            id="contact-email"
            type="text"
            ngControl="email"
            #email="ngForm"
            [(ngModel)]="contact.email"
            required
            pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$">

    <div class="md-errors-spacer" [hidden]="email.valid || email.untouched">
        <div class="md-char-counter" *ngIf="email.errors && email.errors.required">
            Email is required
        </div>
        <div class="md-char-counter" *ngIf="email.errors && email.errors.pattern">
            Email is invalid
        </div>
    </div>
</md-input-container>
75
Mush

Pour les angles 4 et supérieurs:

Selon Ceci, vous pouvez utiliser le "validateur de courrier électronique".

Exemple:

Si vous utilisez des formulaires basés sur des modèles: 

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

Si vous utilisez des formulaires dirigés par un modèle (aka ReactiveFormsModule), utilisez Validators.email:

this.myForm = this.fb.group({
    firstName: ['', [<any>Validators.required]],
    email: ['', [<any>Validators.required, <any>Validators.email]],
});

Ancienne réponse: Vous pouvez utiliser angular 2 FormGroup,

En utilisant validators.pattern et regex comme ceci:

 let emailRegex = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
 this.myForm = this.fb.group({
        firstName: ['', [<any>Validators.required]],
        email: ['', [<any>Validators.required,  <any>Validators.pattern(emailRegex) ]],
 });
62
Asaf Hananel

Voici une autre façon de valider un champ en utilisant RegEx. Vous pouvez lier une méthode à l'événement keyUp du champ.

Dans votre composant:

import {NgForm} from 'angular2/common';

//...

emailValidator(email:string): boolean {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return false;
    }
    return true; 
}

Dans votre HTML (voir)

<div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" [(ngModel)]="user.email"
           placeholder="Email address" required ngControl="email"
           #email="ngForm"
           (keyup)="emailValidator(email.value) == false ? emailValid = false : emailValid = true">
    <div [hidden]="emailValid || email.pristine" class="alert alert-sm alert-danger">Email address is invalid</div>
</div>

Une autre option (champ obligatoire + valider lorsque l'utilisateur quitte le champ)

<div class="form-group">
    <label for="registerEmail">Email address</label>
    <input type="email" class="form-control" [(ngModel)]="user.email"
           placeholder="Email address" required ngControl="email"
           #email="ngForm"
           (blur)="emailValidator(email.value) == true ? emailIsInvalid = false : emailIsInvalid = true">
    <div [hidden]="email.valid || email.pristine" class="alert alert-sm alert-danger">This field is required</div>
    <div [hidden]="!emailIsInvalid" class="alert alert-sm alert-danger">Email address is invalid</div>
</div>

Cette méthode fonctionnera avec n'importe quelle validation, vous pourrez donc modifier le RegEx et valider votre carte de crédit, la date, l'heure, etc.

5
kbugala

Une autre méthode consiste à utiliser une directive personnalisée. J'aime cette approche car elle est plus cohérente avec les autres validateurs ng2.

import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { Validator, AbstractControl } from '@angular/forms';


@Directive({
    selector: '[validateEmail][formControlName], [validateEmail][formControl],[validateEmail][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EmailValidator), multi: true }
    ]
})
export class EmailValidator implements Validator {

    constructor() {
    }

    validate(c: AbstractControl) {
        let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        return EMAIL_REGEXP.test(c.value) ? null : {
            validateEmail: {
                valid: false
            }
        };


    }}

Ensuite, l'utilisation en HTML est 

<input class="form-control" 
               type="email"
               [(ngModel)]="user.emailAddress" 
               name="emailAddress" 
               placeholder="[email protected]"
               validateEmail
5
Oliver

Je suppose que pour l'instant, il n'y a pas de validateur de courrier électronique, mais il est assez facile d'en ajouter un personnalisé. Voir cette demo J'ai utilisé la même expression rationnelle que angular1 utilise.

function emailValidator(control) {
  var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

  if (!EMAIL_REGEXP.test(control.value)) {
    return {invalidEmail: true};
  }
}

3
Guenter Guckelsberger

Vous pouvez également utiliser ng2-validation-manager pour les formulaires réactifs, ce qui facilite la validation de la validation:

this.form = new ValidationManager({
  'email'       : 'required|email',
  'password'    : 'required|rangeLength:8,50'
});

et la vue:

<form [formGroup]="form.getForm()" (ngSubmit)="save()">

    <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control" formControlName="email">
      <div *ngIf="form.hasError('email')" class="alert alert-danger">
        {{form.getError('email')}}
      </div>
    </div>

    <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" formControlName="password">
      <div *ngIf="form.hasError('password')" class="alert alert-danger">
        {{form.getError('password')}}
      </div>
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
</form>
1
Sabri Aziri

Mise à jour pour Angular 4 

ngOnInit() {
    this.user = new FormGroup({
        name: new FormGroup({
            firstName: new FormControl('',Validators.required),
            lastName: new FormControl('')
        }),
        age: new FormControl('',null,validate),
        email: new FormControl('',emailValidator),
    // ...
    });
}

Validateur

export function emailValidator(control: AbstractControl):{[key: string]: boolean} {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
        return {invalid:true};
    }
    return null;
}

Modèle 

<div class="row">
    <div class="col-md-12">
        <md-input-container>
            <input mdInput type="text" placeholder="Email" formControlName="email">
        </md-input-container>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <span *ngIf="user.get('email').touched && !user.get('email').valid && !user.get('email').pristine">
            <small>Invalid email</small>
        </span>
    </div>
</div>
1
Rahul Singh

J'utilise: https://www.npmjs.com/package/ng2-validation

npm install ng2-validation --save ng2-validation

Je ne réponds pas exactement à votre question, mais pour beaucoup de scénarios courants, vous pouvez trouver un validateur personnalisé déjà implémenté. 

exemple dans votre cas: email: ['', [CustomValidators.email]]

Meilleurs reagards,

0
Castelmager

Je pense qu’aujourd’hui, vous pouvez utiliser la validation du navigateur ici. Les champs d'email ont un support correct et vous pouvez obtenir le résultat de validation de element.validity.valid. Il vous suffit de passer cela à travers le validateur personnalisé angulaire

Voir https://developer.mozilla.org/en-US/docs/Web/API/ValidityState et http://caniuse.com/#feat=input-email-tel-url pour détails

0
s-f