Angular 2 Email Validator

Question

Mam problem z moim prostym walidatorem wiadomości e-mail. Moja strona .ts że kontroluje moje html ma ten kod:

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

mój kod HTML jest:

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

I wreszcie moje email.ts że trzyma mnie walidator wygląda następująco:

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

} 

Ciągle mam błędy podczas odwoływania się do tego weryfikatora w moim głównym pliku .ts. Na przykład, mam ten błąd, gdy unosi się nad „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 

Co robię źle?

Answer 1

ten został rozwiązany przez zmianę klasy importowanego z Control do FormControl w pierwszej linii z moich 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

Jeszcze lepiej, teraz, kątowe 4-mail walidator ma wbudowany https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Po prostu dodaj e-mail do tagu. Na przykład,

<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,}$"> 

atrybut wzór może być stosowany do niestandardowych walidacji