Angular 2电子邮件验证器 [英] Angular 2 Email Validator

问题描述

我在使用简单的电子邮件验证程序时遇到了麻烦.控制我的html的.ts页面具有以下代码:

I'm having trouble with my simple email validator. My .ts page that controls my html has this code:

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看起来像这样:

And finally, my email.ts that holds my validator looks like this:

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"上时会出现此错误

I keep having errors when referencing this validator in my main .ts file. For example, I get this error when hovering over "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

我在做什么错了?

推荐答案

更好的是，现在Angular 4内置了电子邮件验证程序 https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Even better, now, Angular 4 has email validator built-in https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

只需在标签中添加电子邮件.例如，

Just add email to the tag. For example,

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

这篇关于Angular 2电子邮件验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！