Отправка реактивной формы Angular и четкая проверка

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

Вместо этого вам нужно будет вызвать resetForm, который находится в FormGroupDirective:

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

this.formGroupDirective.resetForm();

Во-вторых, вам нужно заключить его в setTimeout с таймаутом 0, чтобы форма была отправлена ​​до ее сброса.

setTimeout(() => this.formGroupDirective.resetForm(), 0)

Я тестировал это в StackBlitz, и, похоже, все работает:

https://stackblitz.com/edit/angular-l6xq1d?file=src%2Fapp%2Fapp.component.ts

Это работает, попробуйте это, вам нужно сбросить formDirective, иначе он не будет на 100% отдыхать в форме

Шаблон:

<form 
  ...
  #formDirective="ngForm" 
>

Компонент:

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}

Вы можете легко очистить validators формы с помощью clearValidators()

this.secondFormGroup .clearValidators();
this.secondFormGroup .updateValueAndValidity();

Но это удалит валидаторы из фактической группы форм, и они не будут отображать errors при отправке формы в следующий раз.

Лучше сделать это:

Вы можете просто использовать флаг в шаблоне ошибки, чтобы отображать ошибки на основе отправки / сброса формы. И установите / сбросьте флаг соответственно.

public formSubmitted = false;

onSubmit(){
   this.formSubmitted = true;
}

reset(){
   this.formSubmitted = false;
}

файл шаблона

<div *ngIf="formSubmitted">
 display errors
</div>

Если вы используете входы Angular Material, вы можете скрыть состояние ошибки, установив входы как untouched. В полях ввода материала отображается состояние ошибки только при касании ввода.

So

this.secondFormGroup.markAsUntouched();

должен сделать свое дело.

Возможно, вам придется запустить запуск обнаружения изменений после такой операции (в зависимости от сценария)

Вот вам доказательство концепции. Вход изначально находится в состоянии ошибки. Специальная кнопка очищает это состояние до будущего ввода.

https://stackblitz.com/edit/angular-tadkmb?file=src%2Fapp%2Fapp.component.ts