Компонент пользовательского элемента управления, реализующий ControlValueAccessor и Validator, не синхронизируется с использованием FormGroup

Фон:

У меня есть собственный компонент управления электронной почтой (), который реализуетControlValueAccessorиValidator. МетодEmailControlComponentпринимает один параметр. В API Angular метод проверки вызывается каждый раз, когда потребляющая родительская группа FormGroup выдает valueChanges в элементе управления электронной почтой клиента.

Пример:

Stackblitz

Вопрос:

Почему методAbstractControlпараметр не синхронизирован со статусом родительской группы форм?

Если вы посмотрите на демонстрацию выше и просмотрите консоль, вы должны увидеть, чтоcontrol.statusвсегда , независимо от фактического состояния элементов управления. Родительская группа FormGroup правильно показывает переключение состояния элемента управления междуVALIDиINVALIDсоответствующим образом, ноvalidate()статус параметра никогда не меняется.

Что я делаю не так?

Использованная литература:

https://angular.io/api/forms/ControlValueAccessor

https://angular.io/api/forms/NG_VALIDATORS

Источник

2 ответа

Когда у вас есть настраиваемый элемент управления формой, который реализует валидатор, вы можете добавить функциюvalidate. Эта функция подтверждает, что это функция, которая возвращает на основе значения элемента управления значение null или объект.

Но этот настраиваемый элемент управления формы можно передать с помощью FormControl, у которого есть валидаторы. (Это цель написать в провайдере: multi: true,)

Я хочу сказать, что проверка вашей функции должна быть, например

      validate(control: AbstractControl): ValidationErrors | null {
    const EMAIL_REGEXP =
    /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
    return EMAIL_REGEXP.test(control.value) ? null : {'email': true};
}

И когда вы создаете FormControl, напишите только

        email=new FormControl('',Validators.required)

Или не внедрять валидатор

Нет смысла иметь функцию проверки, которая спрашивает только о control.valid

Обновите , можем ли мы «проверить» в пользовательском formControl, если у formControl есть внешние валидаторы, и он заполнен или нет, мы можем получить доступ к валидатору функции.

Некоторым нравится

      validate(control: AbstractControl): ValidationErrors | null {
  const error=control && control.validator?
          control.validator(new FormControl(control.value)):
          null

  //in error we have the errors: the inner and the outer error

  ..rest of our code...
}

Убедитесь, что вы можете получить доступ к «функции проверки» элемента управления. Единственный фид с новым formControl с тем же значением, что и control.value

Итак, код перед выдает нам по ошибке объект с ошибками. Будьте осторожны, есть ошибки от внешней и внутренней ошибки.

Источник

Увидел это на Reddit и пришел сюда, так что, короче говоря, вашему пользовательскому элементу управления электронной почтой не нужен formControl, у вас уже есть formControl от родителя. Вы расширяете ControlValueAccessor, поэтому вы должны/могли бы иметь:@Optional() @Self() protected override controlDir: NgControlв вашем конструкторе, а затем назначьте его себеcontrolDir.valueAccessor = this;

Я постараюсь найти пример и обновить этот пост.

Источник
Другие вопросы по тегам