Блог

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

Полный пример: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 проверяет наличие проверок, а затем сбрасывает ваши ошибки управления, потому что он не видит их в элементе управления формой (валидаторы не установлены).

Если вы внесете свои изменения в ngAfterViewInit() , он будет работать нормально. (Но да, тогда вам придется вызывать detect changes после этого, иначе вы будете получать ошибки «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

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

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

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

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