Skip to content

[FormField] Class does not reset properly with submit buttons #8848

Closed
@bmbell

Description

@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?

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions