Угловой 2 Email Validator

Question

У меня возникли проблемы с моим простым валидатором электронной почты. Моя страница .ts, которая контролирует мой HTML имеет следующий код:

import {EmailValidator} from '../../validators/email'; 
@Component({ 
    templateUrl: 'build/pages/auth-signup/auth-signup.html', 
}) 

export class AuthSignupPage { 
    constructor(private formBuilder: FormBuilder) { 
    this.slideOneForm = new FormGroup({ 
      firstName: new FormControl('', [ 
       Validators.maxLength(30), 
       Validators.pattern('[a-zA-Z ]*'), 
       Validators.required 
       ]), 
      lastName: new FormControl('', [ 
       Validators.maxLength(30), 
       Validators.pattern('[a-zA-Z ]*'), 
       Validators.required]), 
      email: new FormControl('', [ 
       Validators.maxLength(30), 
       EmailValidator.isValidMailFormat, 
       Validators.required]), 
      password: new FormControl('', [ 
       Validators.maxLength(30), 
       Validators.required]), 
      confirmPassword: new FormControl('', [ 
       Validators.maxLength(30), 
       Validators.required]) 
     }); 
    } 
} 

Мой HTML-код:

<ion-item> 
    <ion-label floating>Email (this will be your login/username)</ion-label> 
    <ion-input #email (change)="elementChanged(email)" formControlName="email" type="email" [class.invalid]="!slideOneForm.controls.email.valid && (emailChanged || submitAttempt)"></ion-input> 
    </ion-item> 

И, наконец, мой email.ts, что держит мой валидатор выглядит следующим образом:

import {Control} from '@angular/common'; 


export class EmailValidator { 

    static isValidMailFormat(control: 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 (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) { 
      return { "Please provide a valid email": true }; 
     } 

     return null; 
    } 

} 

У меня возникают ошибки при ссылке на этот валидатор в моем основном файле .ts. Например, я получаю эту ошибку при наведении курсора на «EmailValidator.isValidMailFormat»

[ts] 
Argument of type '(ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; }))[]' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[]'. 
    Type '(ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; }))[]' is not assignable to type 'ValidatorFn[]'. 
    Type 'ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; })' is not assignable to type 'ValidatorFn'. 
     Type '(control: Control) => { "Please provide a valid email": boolean; }' is not assignable to type 'ValidatorFn'. 
     Types of parameters 'control' and 'c' are incompatible. 
      Type 'AbstractControl' is not assignable to type 'Control'. 
      Property 'updateValue' is missing in type 'AbstractControl'. 
import EmailValidator 

Что я делаю не так?

Answer 1

Эта задача была решен путем изменения импортируемого класса от Control к FormControl в первой строке моего validator.ts:

import {FormControl} from '@angular/forms'; 


export class EmailValidator { 

    static isValidMailFormat(control: FormControl){ 
     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; 

     if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) { 
      return { "Please provide a valid email": true }; 
     } 

     return null; 
    } 

} 

Answer 2

Даже лучше, теперь, Угловой 4 имеют электронный валидатор встроенного https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Просто добавьте email к тегу. Например,

<form #f="ngForm"> 
    <input type="email" ngModel name="email" required email> 
    <button [disabled]="!f.valid">Submit</button> 
    <p>Form State: {{f.valid?'VALID':'INVALID'}}</p> 
    </form> 

Answer 3

just use the validator.pattern('^[^\s@]+@[^\s@]+\.[^\s@]{2,}$') 

my ts code: 

import { Component } from '@angular/core'; 
import { NavController} from 'ionic-angular'; 
import { Observable } from 'rxjs/Observable'; 
import { UserDetails } from '../../app/Model/UserDetails'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 
export class LoginPage { 
logForm: FormGroup; 
    email: string; 
    constructor(public navCtrl: NavController,public formBuilder: FormBuilder) { 
    this.logForm = formBuilder.group({ 
     email: ['', Validators.compose([Validators.required, Validators.pattern('^[^\s@]+@[^\s@]+\.[^\s@]{2,}$'), Validators.minLength(1)])], 
     password: ['', Validators.compose([Validators.required, Validators.minLength(8)])], 

    }); 
    } 


    onSubmit(value: any): void { 
    if (this.logForm.valid) { 
     //window.localStorage.setItem('username', value.username); 
     //window.localStorage.setItem('password', value.password);  
    } 
    } 


} 

html code: 

    <form [formGroup]="logForm" (ngSubmit)="onSubmit(logForm.value)"> 
     <div class="login-user-input"> 

     <ion-item> 
      <ion-label class="label" fixed>Email</ion-label> 
      <ion-input type="text" formControlName="email" [(ngModel)]="user.Email" ></ion-input> 
     </ion-item> 
     <ion-item *ngIf="logForm.controls.email.hasError('pattern') && logForm.controls.email.touched"> 
      <p>Please enter valid Email</p> 
     </ion-item> 
     <ion-item> 
      <ion-label class="label" fixed>Password</ion-label> 
      <ion-input type="password" formControlName="password" maxlength="8" [(ngModel)]="user.password"></ion-input> 
     </ion-item> 
     <ion-item *ngIf="logForm.controls.password.hasError('minLength') && logForm.controls.password.touched"> 
      <p>Please enter valid Password</p> 
     </ion-item> 
     </div> 
     <div> 
     <button text-center class="customersubmitbtn" [disabled]="!logForm.valid" color="primary" >Login</button> 
     </div> 
    </form> 

Answer 4

<input type="email" pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$"> 

Атрибут шаблон может быть использован для пользовательской проверки