Неправильный контроль формы с помощью setErrors

Question

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

Полный пример: 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
});

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

Спасибо!

Answer 1

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

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

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

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

Answer 2

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

Вполне вероятно, что после того, как поля ввода добавлены в представление, 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