angular - validação - Validador de email genérico




validação angular 6 (7)

Eu quero criar um formulário onde o usuário irá inserir seu email. Eu gostaria de validar o formato de e-mail do lado do cliente.

Existe algum validador genérico de email no Angular 2?

NB: Algo semelhante ao validador AngularJS .


Ainda outra maneira de fazer isso é usando uma diretiva personalizada. Eu gosto desta abordagem, pois é mais consistente com os outros validadores 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!#$%&'*+\/=?^_`{|}~.-][email protected][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
            }
        };


    }}

Então, o uso em html é

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

Além disso, você pode usar o ng2-validation-manager para formulários reativos, o que facilita a correspondência de validação:

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

e a vista:

<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>

Estou usando: https://www.npmjs.com/package/ng2-validation

npm install ng2-validation --salvar ng2-validação

Eu não estou respondendo exaclty sua pergunta, mas para muitos cenários comuns, você pode encontrar um validador personalizado já implementado

exemplo no seu caso: email: ['', [CustomValidators.email]]

Cumprimentos,


Eu acho que agora não há um validador de e-mail, mas é muito fácil adicionar um personalizado. Veja esta demo Eu usei o mesmo regex que angular1 usa.

function emailValidator(control) {
  var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-][email protected][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};
  }
}


Você pode fazer apenas usando 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>

Você pode usar diretivas de formulário e controle para fazer isso.

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
     });
}

Importar:

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

Então sua classe GlobalValidator :

export class GlobalValidator {

    static mailFormat(control: Control): ValidationResult {

        var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-][email protected][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;
}

E então seu 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>

Para mais informações sobre isso, você pode ler este bom artigo: https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg ou ver este projeto github para um exemplo de trabalho .

(edit: que reg ex não parece verificar um ponto no domínio

Eu uso este em vez disso

/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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/


Para angular 4 e acima:

De acordo com This você pode usar "validador de email".

Exemplo:

Se você usar formulários orientados por modelos:

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

Se você usar formulários baseados em modelos (também conhecidos como ReactiveFormsModule), use Validators.email :

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

Resposta antiga: você pode usar o FormGroup angular 2,

Usando validators.pattern e regex como este:

 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) ]],
 });




angular2-forms