Пользовательская проверка в угловой форме на основе шаблона не обновляет состояние формы - PullRequest
0 голосов
/ 28 августа 2018

Я пытаюсь написать собственный валидатор для формы на основе шаблона. Сам валидатор (включен ниже) работает как брелок для валидации на уровне поля. Но это не обновляет состояние проверки для всей формы. Другими словами, когда все элементы управления допустимы, тег формы по-прежнему показывает 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 };
    }

  }
}

1 Ответ

0 голосов
/ 28 августа 2018

... похоже, что это был дубликат Состояние формы Angular 2 всегда недопустимо с пользовательской проверкой для элемента управления ng-select .

Ответ заключается в том, что валидатор должен возвращать ноль, если элемент управления действителен, а не истина.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...