angularformsangular-reactive-formsangular-validation

Angular validation messages appears after reset() form

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: form as when the page loaded, no validation errors 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. form with validation errors 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!

Solution

  • 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)">