如何在 Angular2 中制作自定义验证器

Question

我正在制作一个自定义验证器来检查输入是否是有效的电子邮件格式。

这是我的验证器class:

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

export class EmailValidator {

    static getEmailValidator() {
        return function emailValidator(control: FormControl): { [s: string]: boolean } {

            if (!control.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
                return {invalidChars: true};
            }
       }
    }
}

我的 HTML 看起来像这样：

<div class="form-group">

    <input  class="form-control"
            [(ngModel)]="model.email"
            type="text"
            id="name"
            placeholder="Enter your email"
            [formControl]="signupForm.controls['email']"

     >
     <div *ngIf="signupForm.controls['email'].errors?.required&& signupForm.controls['email'].touched"
          class="alert alert-danger">Email is required</div>
     <div *ngIf="signupForm.controls['email'].hasError('invalidChars') && signupForm.controls['email'].touched"
          class="alert alert-danger">Please give a valid email address</div>

我的 HTML 组件：

export class SignupComponent  {


    signupForm: FormGroup;
    email: AbstractControl;

    model: any = {};
    response: any;


    constructor(fb: FormBuilder, private userService: UserService) {
        this.signupForm = fb.group({
            'email' : ['', Validators.compose([Validators.required, EmailValidator.getEmailValidator()])]

        });
        this.email = this.signupForm.controls['email'];
    }

最后我得到了异常：

Uncaught (in promise): Error: Error in ./SignupComponent class 
SignupComponent - inline template:31:4 caused by: Cannot read property 
'match' of undefined TypeError: Cannot read property 'match' of undefined at
 emailValidator

我的问题是为什么我的匹配未定义，以及如何最适合实现自定义验证器？

Answer 1

由于验证器本身看起来不错，错误看起来很像您的 control.value 是 undefined，因为它是原始的。将 emailValidator 函数更新为以下内容：

static getEmailValidator() { 
    return function emailValidator(control: FormControl): { [s: string]: boolean } {

        if (control.value && !control.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
            return {invalidChars: true};
        }
    }

所以它会尝试用正则表达式测试值，只有在有提供的情况下。

如何在 Angular2 中制作自定义验证器

How to make a custom validator in Angular2

forms

custom-validators

angular