Как сбросить ошибку проверки без сброса формы в угловых?

Question

У меня угловая шаблонная форма. и я хочу сбросить все ошибки валидации и сделать их нетронутыми без сброса формы. Как это сделать в угловых? Я попробовал следующий метод

onAdd(form: NgForm) {

form.form.markAsPristine();
form.form.markAsUntouched();

}

но это не работает.

ссылка: - https://stackblitz.com/edit/angular-ezixd4

текущее поведение: - когда я нажимаю, чтобы отправить пустую форму, все поле помечается ошибкой, а когда я нажимаю add, оно добавляет поле, но указанная выше функция не удаляет сообщение об ошибке.

ожидаемое поведение: - когда я нажимаю, чтобы отправить пустую форму, все поле помечается ошибкой, а когда я нажимаю add, оно добавляет поле и должно удалить сообщение об ошибке в форме (или в добавленных файлах).

В этой форме я добавляю поле ввода с помощью кнопки «Добавить» и хочу стереть любое сообщение об ошибке, прежде чем пользователь сможет взаимодействовать с формой.

Answer 1

класс mat-input-invalid частично зависит от состояния submitted формы. Поэтому, когда вы отправляете форму, свойство submitted переключается на true. markAsPristine() или markAsUntouched() не не сбрасывает флаг submitted, поэтому ошибки по-прежнему отображаются. Я вижу две возможности. Один быстрый и грязный, который при тестировании кажется работает в вашем случае. Я не могу обещать, что так будет во всех случаях, но вы можете поэкспериментировать с этим и посмотреть, сработает ли это. То есть вы вызываете resetForm(), который делает сбросом свойства submitted. Но да, вы хотите сохранить значения, которые установлены .. поэтому мы передаем значение текущего состояния формы в сброс:

onAdd(form: NgForm) {
  this.specification.push(++this.num);
  form.resetForm(form.value);  
}

DEMO

Так что это был грязный способ, более контролируемым было бы использование ErrorStateMatcher, которое также упоминается в документах . При этом вы можете выбрать, когда показывать сообщения об ошибках.

Answer 2

Вы можете просто перебирать каждое обязательное поле и вызывать их setErrors метод, передавая им null:

YOUR_FORM.controls.YOUR_FIELD_NAME.setErrors(null);

, например, когда у вас есть username и password поле:

this.loginForm.controls.username.setErrors(null);
this.loginForm.controls.password.setErrors(null);

Надеюсь, это поможет!