Как проверить отключенный элемент управления с помощью реактивных форм (проверка не запускается)

Допустим, у меня есть эта структура формы:

      this.entryForm = this.formBuilder.group({
            date: [{value:'' , disabled: true}, [Validators.required]],
            notes: [''],
            sum_credit: [{value:'', disabled: true }],   
            sum_debit: [{value:'', disabled: true}],
            items: this.initItems()
          });
// set validation function to sum_credit

   this.entryForm.controls['sum_credit'].setValidators([CommonValidations.validateSomthing(...)]);

sum_credit отключен, потому что его значение всегда рассчитывается. Теперь мне нужно проверить, что sum_credit равно sum_debit, и я уже делаю это, используя функцию validateSomthing. Проблема в том, что validateSomthing не срабатывает, потому что элемент управления отключен. Как я могу это исправить?

Спасибо


angular angular-reactive-forms
person Furqan S. Mahmoud    schedule 28.07.2018    source источник
comment
Если sum_credit вычисляется всегда, зачем вообще нужен валидатор? Похоже, вместо этого у вас должен быть модульный (или интеграционный) тест.   -  person maxime1992    schedule 29.07.2018
comment
Мне кажется, что sum_credit вообще не должен быть в форме. И когда вы обрабатываете отправку и передаете объект, просто добавьте вычисление этого поля.   -  person maxime1992    schedule 29.07.2018
comment
@ maxime1992 вы правы, рассчитанные значения уже являются правильными значениями и не нуждаются в проверке, но здесь это не так, я не хочу проверять сам sum_credit, я хочу убедиться, что sum_credit равен sum_debit.. если они не равны, я должен уведомить пользователя о необходимости корректировки значений элементов до тех пор, пока эти значения не будут равны.   -  person Furqan S. Mahmoud    schedule 29.07.2018
comment
В последнем случае вам действительно нужен валидатор в группе вместо элемента управления. Так что вы должны быть в порядке с моим ответом.   -  person Frederik Prijck    schedule 29.07.2018

Ответы (1)


arrow_upward
15
arrow_downward

Angular не запускает валидаторы для отключенных полей. Один из способов обойти это — применить валидатор к группе вместо элемента управления (это будет запускать валидатор для каждого обновления любого, не отключенного, элемента управления формы внутри соответствующей группы:

this.entryForm = this.formBuilder.group({
    date: [{value:'' , disabled: true}, [Validators.required]],
    notes: [''],
    sum_credit: [{value:'', disabled: true }],   
    sum_debit: [{value:'', disabled: true}],
    items: this.initItems()
  }, { validator: CommonValidations.validateSomthing(...) });

Обратите внимание, что вам нужно адаптировать функцию валидатора для чтения значения из элемента управления sum_debit:

validateFn(group: AbstractControl) {
  const control = group.get('sum_debit');
  // here you can validate control.value;
}
person Frederik Prijck    schedule 28.07.2018
comment
Спасибо, за ответ, у меня только вопрос, пожалуйста, ничего, если я назначу валидатор после инициализации формы? потому что я получаю сообщение об ошибке, когда передаю this.entryForm в validatorFn. - person Furqan S. Mahmoud; 29.07.2018
comment
Все должно быть хорошо, однако у вас не должно быть ошибок в том, как я это делаю. - person Frederik Prijck; 29.07.2018
comment
Это не препятствует отправке формы, означает, что статус формы или поля не изменится на invalid, следовательно, не будет надлежащей проверки. - person Nadeem; 04.06.2019
comment
@Nadeem Предполагается обновить действительность formGroup (и ее родительских групп). - person Frederik Prijck; 04.06.2019
comment
Является ли утверждение: Angular не запускает валидаторы для отключенных полей, все еще реальным в Angular 6? Это кажется странным, если это так, поскольку использование отключенного атрибута в директиве реактивной формы приводит к этой ошибке в console.log(): form = new FormGroup({ first: new FormControl({value: 'Нэнси', disabled: true} , Validators.required), last: new FormControl('Drew', Validators.required) }); ||| Обратите внимание, что Validators.required записывается в отключенный FormControl. Кто-нибудь может подтвердить? - person Sean Halls; 07.01.2020
comment
Да, это все еще правильно, посмотрите: stackblitz.com/edit/angular-ypwqkm - person Frederik Prijck; 07.01.2020
comment
Вы можете видеть, что проверка формы игнорирует отключенный элемент управления. Попробуйте включить этот элемент управления и посмотрите, как внезапно проверка действительно учитывает этот элемент управления. - person Frederik Prijck; 07.01.2020
comment
Вы упомянули: обратите внимание, что Validators.required записывается в отключенный FormControl. Это правильно, так как когда элемент управления снова включается (например, при взаимодействии с пользователем, например, при установке флажка), необходимо учитывать проверку, не требуя повторного присоединения этой проверки. - person Frederik Prijck; 07.01.2020
comment
Fwiw, я думаю, что это часть фреймворка Angular, которая отвечает за то, чтобы этот элемент управления не помечался как недействительный, а вместо этого был отключен: github.com/angular/angular/blob/master/packages/forms/src/ - person Frederik Prijck; 07.01.2020
comment
не работает флоп, у меня есть группа форм с валидаторами formcontrol.required, после того, как я сделал fromGroup.disabled(), когда я отправляю форму, ошибка проверки не появляется - person selma; 19.02.2020
comment
Если вы отключите formGroup, ее валидаторы не будут выполняться. - person Frederik Prijck; 21.02.2020