Как сделать собственный валидатор в Angular2

Я делаю собственный валидатор для проверки правильности формата электронной почты.

Это мой класс Validator:

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>

My Component to the 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

Мой вопрос в том, почему мое совпадение не определено, и как было бы наиболее подходящим реализовать собственный валидатор?


angular forms custom-validators
person GaborH    schedule 27.11.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Поскольку сам валидатор выглядит нормально, ошибка выглядит так, как будто ваш 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};
        }
    }

Таким образом, он попытается проверить значение с помощью регулярного выражения только в том случае, если оно предоставлено.

person Daniel Mylian    schedule 27.11.2016
comment
Значение control.value не определено. Я получаю это исключение, когда загружаю страницу. - person GaborH; 27.11.2016
comment
Кроме того, у меня есть вопрос о привязке элементов управления к форме. Разве это не должно быть formControlName="email" с [formGroup]="signupForm" на form (в данном случае на элементе div)? Но что касается валидатора, не будет ли решением простая дополнительная проверка: if (control.value && !control.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {? - person Daniel Mylian; 27.11.2016
comment
В этом была проблема, я не думал об этом. Я добавил (control.value && !control.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)), поэтому он проверяет во-первых, если оно имеет значение, и, конечно же, значения нет, пока поле остается нетронутым. Если вы отредактируете свой ответ с решением, я приму его как ответ. - person GaborH; 27.11.2016