Angular2でカスタムバリデータを作成する方法

Question

入力が有効な電子メール形式であるかどうかを確認するカスタムバリデータを作成しています。

これは私のValidatorクラスです：

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

そして最後に：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> 

マイコンポーネント：

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は、そのように見えます例外私は得る：

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

だから、1は1が提供される場合にのみ正規表現をテスト値にしようとします。