reactive form .reset() not clearing the validators

Question

I am using a simple reactive form in Angular6.

this.phoneForm = this._formBuilder.group({
  oldMac: new FormControl('', Validators.compose([
    Validators.required,
    Validators.pattern('')
  ])),
  newMac: ['', Validators.required],
  newModel: ['', [Validators.required]],
  targetCluster: ['', [Validators.required]],
  ownerUser: ['', [Validators.required]]
}, { updateOn: 'blur' });

To reset I am using this.phoneForm.reset();, it is clearing the form but does not clear the validators, my form is showing as invalid.

Please help

EDIT: I forget to add that I am using angular-material input.

https://stackoverflow.com/questions/48216330/angular-5-formgroup-reset-doesnt-reset-validators?answertab=active#tab-top — Sachila Ranawaka, Jan 22 '19 at 09:30
@raju https://stackoverflow.com/questions/51300628/angular-reactive-forms-set-and-clear-validators — Abhishek, Jan 22 '19 at 09:36

score 1 · Answer 1 · answered Jan 22 '19 at 09:30

1

You need to use the following:

this.phoneForm.clearValidators();
this.phoneForm.updateValueAndValidity();  
this.phoneForm.reset();

From the docs:

clearValidators()

Empties out the sync validator list.

updateValueAndValidity()

Recalculates the value and validation status of the control.

answered Jan 22 '19 at 09:30

Peter Haddad

78,874
25
140
134

This does not have any effect, all input fields after submit are still red – raju Jan 22 '19 at 10:06

Ish · Answer 2 · 2019-01-22T11:13:44.507

0

This issue is related to: https://github.com/angular/material2/issues/4190 Reset simply clears the content of the form triggering the validation to fail as no values are provided. In order to essentialy reset to a base state the forms should be marked as pristine or untouched.

    Object.keys(this.form.controls).forEach(key => {
      let control = this.form.controls[key];
      control.reset(); // clear control's contents.

      // resets the control the before user interaction state
      control.markAsPristine(); 

      // As raju stated this will not only remove errors but also remove all validators.
      control.setErrors(null); 
    });

edited Jan 22 '19 at 11:13

answered Jan 22 '19 at 09:35

Ish

71
6

1

This removes all the validators also. – raju Jan 22 '19 at 10:04
Thanks Raju, that's news to me. I didn't know that validators could be cleared like that. – Ish Jan 22 '19 at 11:02

reactive form .reset() not clearing the validators

2 Answers2