Я пытаюсь написать собственный валидатор для формы на основе шаблона. Сам валидатор (включен ниже) работает как брелок для валидации на уровне поля. Но это не обновляет состояние проверки для всей формы. Другими словами, когда все элементы управления допустимы, тег формы по-прежнему показывает class = "ng-invalid".
Когда я удаляю phoneValidator из элемента управления в моем шаблоне, все работает нормально.
Мне интересно, может ли это быть как-то связано с методом registerOnValidatorChange, который определен в интерфейсе. Я не специально внедряю это в свой пользовательский валидатор, но я также не совсем уверен, как его использовать:
export interface Validator {
validate(c: AbstractControl): ValidationErrors | null;
registerOnValidatorChange?(fn: () => void): void;
}
Мысли оценены. Спасибо!
файл: phonevalidator.directive.ts:
import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, AbstractControl, ValidationErrors, Validator, FormControl } from '@angular/forms';
@Directive({
selector: '[validPhoneNumber]',
providers: [
{ provide: NG_VALIDATORS, useExisting: PhoneValidatorDirective, multi: true }
]
})
export class PhoneValidatorDirective implements Validator {
validate(control: FormControl): ValidationErrors | null {
return PhoneValidatorDirective.validatePhone(control);
}
static validatePhone(control: FormControl): ValidationErrors | null {
var regEx = new RegExp(/^[1-9]\d{2}-\d{3}-\d{4}/);
console.log("Phone validator: validating phone number.")
var controlValue: string = control.value;
console.log(regEx.exec(controlValue));
if (!(regEx.exec(controlValue))) {
// Return error if phone number is not valid
console.log('returning false');
return { phoneNumber: false };
} else {
// If no error, return null
console.log('returning true');
return { phoneNumber: true };
}
}
}