mat-form-field does not remove mat-form-field-invalid class on FormGroup reset

[Nathan-Ryan]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Upon resetting a FormGroup, I would expect the visual state of the form to be reset also.

What is the current behavior?

The form group and controls are reset but the mat-input-invalid class remains on the md-input-container suggesting that the control is invalid.

What are the steps to reproduce?

This only seems to happen when the [formGroup] attribute is on a form tag. Works as expected on a div tag.

Create component with a FormGroup and a FormControl with Validators.required .
Create a form tag with the [formGroup] attribute.
Add an input control to the form with a required attribute.

When running, fill out the form so its valid, then reset the form and model through the click handler on a button. The required control will now have the mat-input-invalid class.

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.0.1
Material 2.0.0-beta.3
Windows 10
Chrome 57

[kurpav]

Have the same issue 😢

[mmalerba]

plunker repro: http://plnkr.co/edit/UguaoP1sTR85pyZLh2TN?p=preview

[mmalerba]

It looks like this is just a matter of putting type="reset" on your button. Without it, the form is marked as submitted which causes the error styling to show up. see: http://plnkr.co/edit/IUhbPom8FnauivHUW3bU?p=preview

[goelinsights]

@mmalerba trying to understand how this would fix the issue for a button already type="submit".

I'm resetting after the form is submitted and a response has been received back from the server in an observable complete block.

i.e.,
submitForm()
.subscribe(
res => store.dispatch(type: foo, res),
e => log(e),
() => form.reset()); <- still leaving the form inputs as invalid

[mmalerba]

@goelinsights sounds like maybe a forms issue (could be related to angular/angular#15741). The md-input-container logic is correct, so there's nothing for material to do here

Not sure why, using resetForm() method fixed this issue for me.

[zpydee]

@mmalerba not sure i agree with your diagnosis. I am experiencing same issues and have only updated from material-beta2 to material-beta3. Main angular libraries remain unchanged and problem has only been introduced since material upgrade.

It looks like this is just a matter of putting type="reset" on your button. Without it, the form is marked as submitted which causes the error styling to show up.

after form is submitted, error styling should definitely be removed.

[jeroenvanagt]

@mmalerba Why is this issue closed? The problem still exists when reseting the formGroup like explained by @goelinsights

Scenario:
Press submit button
Do some stuff with the data
Then call formGroup.reset()

formGroup.reset() does NOT remove mat-input-invalid class

[willshowell]

@jeroenvanagt try this

<form [formGroup]="myFormGroup" #f="ngForm">
  ...
</form>

@ViewChild('f') myNgForm;

reset() {
  this.myNgForm.resetForm();
}

http://plnkr.co/edit/sRCiYvRqGevK493w79A4?p=preview

[jeroenvanagt]

@willshowell,

I understand that a reset button works. However, in my case I want to use a submit button, send the data to the backend server and then reset the form (so a new invite can be created).

For the reset, I use :
this.form.reset()
where form is a formGroup

[jeroenvanagt]

I now use the following workaround

        this.form.reset()

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