CODEWITHSUNDEEP
angularforms
rahul Kushwaha
rahul Kushwaha

Reputation: 2809

How to reset validation error without resetting form in angular?

I have an angular template driven form. and I want to reset all the validation error and make it as untouched without resetting the form. How to do that in angular? I have tried the following method 

onAdd(form: NgForm) {

form.form.markAsPristine();
form.form.markAsUntouched();

}

but this doesn't work.

link:- https://stackblitz.com/edit/angular-ezixd4

current behavior:- when I click to submit an empty form, all the field is marked with error and when I click add it adds the field but the above function doesn't remove the error message.

expected behavior:- when I click to submit an empty form, all the field is marked with error and when I click add it adds the field and it should remove the error message on the form (or in the added files).

In this form, I am adding input field with add Button and I want to clear any error message before the user has the chance to interact with the form.

Upvotes: 13

Views: 48133

Answers (8)

Neha Prajapati
Neha Prajapati

Reputation: 129

With Angular Material, you need to define FormGroupDirective As well with FormGroup and FormControl

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

import { FormGroup, FormControl, FormGroupDirective } from '@angular/forms';

Reset FormGroupDirective in the onSubmit method with reactive form reset.

this.formGroupDirective.resetForm();
<br>
this.form.reset();

If the above FormGroupDirective reset does not work, try it with a timeout of 0 second

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

Upvotes: 7

GeeWhizBang
GeeWhizBang

Reputation: 857

I had to do this, put a timeout in so that the blur event prior to clicking a button didn't get handled after the cancel button click:

let timeout = setTimeout(function() {
  Object.keys(originalValues).forEach(controlName => {
    let control =that.getControl(controlName);
    control.setValue(originalValues[controlName]);
    control.markAsUntouched();
    control.setErrors(null);
    control.markAsPristine();
  });
  this.setControlState(formName);
  clearTimeout(timeout);
}, 10);

Upvotes: 0

gal007
gal007

Reputation: 7182

This finally worked for me:

this.form.reset();
Object.keys(this.form.controls).forEach(key => {
    this.form.get(key).setErrors(null) ;
});

Upvotes: 12

S. V
S. V

Reputation: 1215

 resetForm() {
    this.myFormGroup.reset();
    this.myFormGroup.setErrors(null); // could be removed
    this.myFormGroup.updateValueAndValidity();
  }

Upvotes: 3

Thanooz Nichanametla
Thanooz Nichanametla

Reputation: 31

Make sure there is no button inside form section. Addnew button should be outside of form.

Upvotes: 3

Juan Antonio
Juan Antonio

Reputation: 2614

You can do it with a more generic way:

reset(formGroup: FormGroup) {
   Object.keys(formGroup.controls).forEach(
      field => {
         formGroup.get(field).setErrors(null);
      }
    );
}
...
this.reset(yourForm);
...

Upvotes: 0

AVJT82
AVJT82

Reputation: 73337

the class mat-input-invalid depends partly on the submitted state of the form. So when you submit the form, the submitted property is switched to true. markAsPristine() or markAsUntouched() does not reset the submitted flag, thus the errors still show. I see two possibilities. One quick and dirty, which when I tested seems to work in your case. I cannot promise that it will in all cases, but you can experiment around with it and see if it will work. That is, you call resetForm() which does reset the submitted property. But yes, you want to keep the values that are set.. so, we pass the value of the current state of the form in the reset:

onAdd(form: NgForm) {
  this.specification.push(++this.num);
  form.resetForm(form.value);  
}

DEMO

So that was the dirty way, a more controlled way would be to use the ErrorStateMatcher, that is also mentioned in the docs. With that you can choose when to show the error messages.

Upvotes: 4

Blauharley
Blauharley

Reputation: 4246

You could just iterate over each required field and call their setErrors method while passing null onto them:

YOUR_FORM.controls.YOUR_FIELD_NAME.setErrors(null);

for instance when you have a username and password field:

this.loginForm.controls.username.setErrors(null);
this.loginForm.controls.password.setErrors(null);

Hope this helps!

Upvotes: 2

Related Questions