Angular validation messages appears after reset() form

Question

I try to get the form to be clear without the validation error messages after calling reset().

my form looks clean on load, and that is expected: however, if the user pressed the register button, and there was an error, I trigger the form.reset() method. I expect the form to look like the above picture, since the touch, pristine, dirty props are all as when the form is initially loaded. but instead, it clears the values, but shows me the validation error. Can anyone help me please get it to the initial state, a clear form without the validation errors shows up? This is a reactive form. let me know if you need more information. Thanks!

Answer 1

It looks like you are using Angular Materials. If so ,you must reset FormGroupDirective too,only resetting the FormGroup is not enough.

private registerForm(fData: any,formDirective: FormGroupDirective): void {
    formDirective.resetForm();
    this.RegForm.reset();
}

<form [formGroup]="RegForm" #formDirective="ngForm" 
   (ngSubmit)="registerForm(RegForm,formDirective)">