Как скрыть сообщения об ошибках валидатора ngForm после нажатия кнопки

Question

Я борюсь со сбросом ошибок ngForm после нажатия любой кнопки в форме.Кажется, что formDirective.submitted переключается в true, даже после вызова метода resetForm().Я не понимаю, почему вызов formDirective.resetForm() не дает ожидаемого результата.

Шаблон:

<button mat-raised-button color="primary" (click)="testClick()"></button>

Компонент:

@ViewChild(FormGroupDirective) queryFormDir: FormGroupDirective;
...

testClick() {
    this.queryFormDir.resetForm();
}

Нажатие TestClickКнопка приводит к состоянию formDirective.submitted в true, что неверно из того, что я могу сказать.

Согласно Angular API метод resetForm() является правильным для сбросаsubmitted состояние, но у меня нет ожидаемого поведения.

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

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

Моя версия Angular - 7.2.2

Как мне сбросить форму, чтобы сообщения об ошибках валидатора были скрыты после нажатия кнопки в форме?

Редактировать:

В приведенном примереупрощенная версия моей ситуации.Проблема возникает после того, как форма отправлена ​​правильно в первый раз с действительными данными.Форма рассчитана на несколько заявок.После первой отправки запускаются валидаторы, что не удобно для пользователя.Я хочу, чтобы валидаторы не запускались после завершения действительной отправки и сброса формы.

Редактировать 2:

В соответствии с запросом stackblitz .

Answer 1

Может помочь следующее:

Ссылка на форму:

@ViewChild("myForm")
myForm: NgForm;

И сброс:

testClick() {
 this.myForm.form.markAsPristine();
 this.myForm.form.markAsUntouched();
 this.myForm.form.updateValueAndValidity();
}

markAsPristine(): помечает форму как оригинальнуюсостояние как новое и свежее.

markAsUntouched(): Это делает форму нетронутой.Пользователь еще не взаимодействовал или события не сработали на ti.

updateValueAndValidity(): Пересчитывает значение и статус проверки элемента управления.

Установите следующие атрибуты для вашей кнопки для исправления:

Нажатие кнопки TestClick приводит к состоянию formDirective.submitted в true, что неверно из того, что я могу сказать.

type="reset"

Answer 2

Попробуйте это:

testClick() {
    this.queryFormDir.reset();
    this.queryFormDir.setErrors(null);
}