angular / angular/components

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

Open
#4,190 74 comments 88 reactions 0 assignees View on GitHub
area: material/form-field P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with an Angular FormGroup and required FormControl on a form element, then compare it with the same controls on a div. Trace the form reset and mat-form-field validation state through the relevant Angular Material source; done means resetting the group removes the invalid class and preserves the expected behavior for both containers.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.