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!

Victor Rodniansky · Accepted Answer · 2018-11-25T22:34:58.317

16

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

edited Nov 25 '18 at 22:34

answered Nov 25 '18 at 22:25

Victor Rodniansky

443
3
12

Thanks !! that worked. I wasn't aware of the extra step if using angular meterial – Roni Axelrad Nov 25 '18 at 22:52

score 1 · Answer 2 · edited Jun 02 '19 at 15:47

1

static resetForm(formGroup: FormGroup) {
    let control: AbstractControl = null;
    formGroup.reset();
    formGroup.markAsUntouched();
    Object.keys(formGroup.controls).forEach((name) => {
      control = formGroup.controls[name];
      control.setErrors(null);
    });
  }

edited Jun 02 '19 at 15:47

rene

41,474
78
114
152

answered Jun 02 '19 at 15:20

Valber Siqueira

11
1
1

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – rene Jun 02 '19 at 15:47

score 0 · Answer 3 · answered Nov 25 '18 at 22:17

Are you using something like this?

// Reactive Form

constructor(private _builder:FormBuilder) {
    this.createForm();
}

createForm() {
    this.form = this._builder.group({
        key: this.value,
    });
}

// Option 1
resetForm() {
    this.form.reset();
}

// Option 2 - create form again
resetForm() {
    this.createForm()
}

// Template Form

---- HTML ----
<form #myForm="ngForm"></form>

---- TS ----
@ViewChild('myForm') myForm;

resetForm() {
   if (this.myForm) {
      this.myForm.reset();
   }
}

Thanks for your suggestion Mishal. The first answer worked for me. — Roni Axelrad, Nov 25 '18 at 22:53

score 0 · Answer 4 · edited Nov 15 '19 at 08:45

0

You can use method .markAsPristine() of your form to reset validation:

this.RegForm.reset();
this.RegForm.markAsPristine();

edited Nov 15 '19 at 08:45

Pingolin

3,161
6
25
40

answered Nov 15 '19 at 08:16

Dmytro Tolkachov

57
4

score 0 · Answer 5 · answered Jul 22 '23 at 20:24

Global ErrorStateMatcher

With this method you won't have to reset the Form for each component. It goes throughout your application.

1- Create a file and name it something like default-error-state.matcher.ts with this code in it:

import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';

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

2- In app.module.ts provide it in the provider section

// import the files
import { ErrorStateMatcher } from '@angular/material/core';
import { DefaultErrorStateMatcher } from './default-error-state.matcher';

Then

providers: [
  { provide: ErrorStateMatcher, useClass: DefaultErrorStateMatcher }
],

DONE

Angular validation messages appears after reset() form

5 Answers5

Linked