[FormField] Class does not reset properly with submit buttons

[bmbell]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The mat-form-field-invalid class should be removed when calling myFormGroup.reset(), since this class normally only appears when the form control is invalid and touched. This does occur if I use a button of type="button" and not type="submit".

What is the current behavior?

The mat-form-field-invalid class does not reset properly after calling myFormGroup.reset() after a submit button is triggered.

What are the steps to reproduce?

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

Steps to reproduce:

Scenario 1

1. Type anything into input field
2. Click the "Clear" button
3. Observe that the field is cleared and no form validation errors appear (it was reset properly)

Scenario 2

1. Now, type anything into the input field again
2. Click the "Submit" button (which is a submit button that calls formGroup.reset()
3. Observe that the field is cleared, but form validation triggers

Also note the value of mat-form-field-invalid in both scenarios.

What is the use-case or motivation for changing an existing behavior?

It is often common to reuse a form when entering multiple items into a system.

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

Tested using Angular 5.0.0, Material 5.0.0-rc.2, TypeScript 2.4.2

Is there anything else we should know?

[julianobrasil]

You need to use resetForm() of the FormGroupDirective.

[bmbell]

I have access to the FormGroup. How would I get access to the FormGroupDirective?

[julianobrasil]

One of the ways can be seen in @willshowell's answer over here (I like this way): #4190 (comment)

Or you can also use:

<form #f="ngForm" (ngSumbit)="doAnything(f)">

</form>

and in typescript:

doAnything(f: FormGroupDirective) {

}

[mmalerba]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}