Аннулировать управление формой с помощью SetErrors

Я пытаюсь добавить ошибку в элемент управления формы (без каких-либо валидаторов) и ожидаю недопустимого состояния элемента управления при отображении. Но он считается действительным. Что я делаю неправильно?

Полный пример: https://embed.plnkr.co/aYayRFpBBTEzggL0vkXi/

const name = new FormControl('A Name');
name.setErrors({ 'something': true });
name.markAsTouched();

const street = new FormControl('A Street');

this.formData = new FormGroup({
  name,
  street
});

Я ожидаю, что не только «улица» недействительна, но и «имя» также должно быть недействительным (потому что в нем есть ошибка «что-то»)...

Спасибо!


angular angular-reactive-forms reactive-forms
person user2170547    schedule 24.04.2019    source источник
comment
Установка ошибки в setTimeout работает, но я думаю, что это не может быть решением :(   -  person user2170547    schedule 24.04.2019
comment
возможно, вам нужно также markAsDirty?   -  person Mike Jerred    schedule 24.04.2019

Ответы (2)


arrow_upward
1
arrow_downward

Вероятно, ошибки элемента управления реактивной формы сбрасываются после его рендеринга в представлении.

Вполне вероятно, что после добавления полей ввода в представление Angular проверяет проверки, а затем сбрасывает ваши ошибки управления, потому что он не видит их в элементе управления формой (нет установленных валидаторов).

Если вы внесете свои изменения в ngAfterViewInit(), это будет работать нормально. (Но да, тогда вам придется вызывать обнаружение изменений после этого, иначе вы получите ошибки «expressionChangedAfterItHasBeenCheckedError»).

constructor(private _cdr: ChangeDetectorRef) { }

ngOnInit() {
  const name = new FormControl('A Name');

  const street = new FormControl('A Street');

  this.formData = new FormGroup({
    name,
    street
  });
}

ngAfterViewInit() {
    this.formData.get('name').setErrors({'something': true})
    this._cdr.detectChanges();
}

См. пример здесь: https://plnkr.co/edit/RgEoRPF8jSp203xfwiFS?p=preview

person Ashish Ranjan    schedule 24.04.2019

arrow_upward
1
arrow_downward

Думаю, я нашел нормальное решение: https://embed.plnkr.co/kop9jGFR6y5C4SnxXgcL/

Вы можете просто установить «поддельный» валидатор вместо того, чтобы установить ошибку:

const name = new FormControl('A Name', {
  validators: () => {
    return { 'something': true };
  }
});

Но я до сих пор не понимаю, почему это не работает начальным :(

person user2170547    schedule 26.04.2019