navigationend - router events subscribe angular 4

Validador genérico de correo electrónico

Question

Quiero crear un formulario donde el usuario ingresará su correo electrónico. Me gustaría validar el formato de correo electrónico del lado del cliente.

¿Hay algún validador de correo electrónico genérico en Angular 2?

NB: Algo similar al validador AngularJS .

Answer 1

Aquí hay otra forma de validar un campo usando RegEx. Puede vincular un método al evento keyUp del campo.

En su componente:

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

En tu HTML (ver)

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

Otra opción (campo obligatorio + validar cuando el usuario abandona el campo)

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

Este método funcionará con cualquier validación, por lo que podría cambiar el RegEx y validar la tarjeta de crédito, fecha, hora, etc.

Answer 2

Creo que hoy en día puedes usar la validación del navegador aquí. Los campos de correo electrónico tienen un soporte decente y puede obtener el resultado de validación de element.validity.valid . Solo necesita pasar esto a través del validador personalizado angular

Consulte https://developer.mozilla.org/en-US/docs/Web/API/ValidityState y http://caniuse.com/#feat=input-email-tel-url para más detalles.

Answer 3

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

npm install ng2-validation --save ng2-validation

No estoy respondiendo exactamente su pregunta, pero para muchos escenarios comunes puede encontrar un validador personalizado ya implementado

ejemplo en su caso: correo electrónico: ['''', [CustomValidators.email]]

Mejores recuerdos,

Answer 4

Otra forma de hacerlo es usar una directiva personalizada. Me gusta este enfoque, ya que es más consistente con los otros 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!#$%&''*+//=?^_`{|}~.-]+@[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
            }
        };


    }}

Entonces el uso en html es

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

Answer 5

Puede usar Directivas y control de formularios para hacer esto.

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

Entonces su clase 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;
}

Y luego tu 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 obtener más información sobre esto, puede leer este buen artículo: https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg o vea este proyecto de Github para ver un ejemplo de trabajo .

(editar: ese registro no parece verificar un punto en el dominio

Yo uso este en su lugar

/^(([^<>()/[/]//.,;:/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/

Answer 6

Solo puedes hacerlo 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>

Answer 7

Supongo que en este momento no hay un validador de correo electrónico, pero es bastante fácil agregar uno personalizado. Vea esta demo Utilicé la misma expresión regular que utiliza angular1.

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

Answer 8

También puede usar ng2-validation-manager para formularios reactivos que facilita la validación:

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

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

Answer 9

Actualización para 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),
    // ...
    });
}

Validador

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

Modelo

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

Answer 10

Para angular 4 y superior:

De acuerdo con This , puede utilizar el "validador de correo electrónico".

Ejemplo:

Si usa formularios basados ​​en plantillas:

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

Si usa formularios controlados por modelos (también conocido como ReactiveFormsModule) use Validators.email :

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

Respuesta anterior: puede usar angular 2 FormGroup ,

Al usar validators.pattern y regex de esta manera:

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