Установка ошибок в экземпляре FormGroup в Angular Reactive Forms не работает должным образом

Я использую реактивные формы Angular 4.4.3 для реализации настраиваемой проверки для группы элементов управления в форме. Метод AbstractControl.setErrors, согласно документам, обновляет свойство ошибок AbstractControl при который он вызывается, обновляет статус своего родителя, но не свойство родительских ошибок. Я хотел установить свойство errors для экземпляра FormGroup, поэтому я использую setErrors, унаследованные от FormGroup. Однако он не обновляет ошибки должным образом.

Ниже приведен мой пример кода: пробуя его на экземплярах FormControl, обновляются их ошибки, а также статус достоверности их родителей (но не ошибки родителей!):

let myFormGroup 
    = this._formBuilder
          .group({
                   ctrl1: [null],
                   ctrl2: [null]
                 }, 
                 {
                   validator: (fg: FormGroup) => {
                                   let ctrl1 = fg.get('ctrl1'),
                                       ctrl2 = fg.get('ctrl2'),
                                       ctrl1Empty = !ctrl1.value,
                                       ctrl2Empty = !ctrl2.value;

                                       //Successfully sets ctrl1.errors and fg.status, but not fg.errors 
                                       if (ctrl1empty)
                                         ctrl1.setErrors({ctrl1required: true});
                                       //Successfully sets ctrl2.errors and fg.status, but not fg.errors 
                                       if (ctrl2Empty)
                                         ctrl2.setErrors({ctrl2required: true});
                                       //Doesn't work, doesn't update fg.errors
                                       if (ctrl1Empty && ctrl2Empty)
                                         fg.setErrors({required: true});
                              }
                 })

Есть идеи, почему?


typescript angular validation angular-reactive-forms angular-forms
person Bahaa    schedule 25.09.2017    source источник
comment
Для дальнейшего пояснения: возврат ошибки непосредственно из валидатора (т.е. return {required: true}) работает, но все же поведение setErrors несовместимо в случае экземпляров FormGroup, которые являются экземплярами AbstractControl.   -  person Bahaa    schedule 25.09.2017

Ответы (1)


arrow_upward
4
arrow_downward

Итак, благодаря подтверждению @ incognito, я выяснил, в чем проблема, после дальнейшего изучения.

setErrors устанавливает свойство errors экземпляра группы форм. Однако пользовательский валидатор, показанный в моем вопросе, явно не возвращает значение (т.е. ложное неопределенное значение). Заглянув в код модуля реактивных форм в angular, я обнаружил этот метод, который объединяет ошибки, вызванные различными валидаторами в эта строка, метод проверяет, не равны ли ошибки (undefined в моем фрагменте кода) нулю. Это условие (как проверено в его версии es5) оценивается как ложь, что приводит к тому, что результат становится нулевым, таким образом игнорируя содержимое свойства ошибок, установленного в коде. Урок, который я усвоил, заключается в следующем: всегда возвращать значение из настраиваемых валидаторов, даже если дополнительные вложенные экземпляры FormGroup имеют собственную настраиваемую логику для установки ошибок.

person Bahaa    schedule 26.09.2017