md-select errors still displayed even after resetting formGroup

[ChakrounAnas]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

after resetting the formGroup the error associated with md-select should disappear

What is the current behavior?

after resetting the formGroup the error associated with the md-select still displayed

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/DlHd6U

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

1. Create a formGroup with an md-select that is required for example
2. Reset the form after submission

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

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

Angular 4.3.3
Material 2.0.0-beta.11
Windows 10
Typescript 2.5.2
Browser Google Chrome 61.0.3163.100

Is there anything else we should know?

In order to reset the formGroup i use the technique described here : #4190

Thanks.

[willshowell]

I think this is expected behavior, per #4190.

[ChakrounAnas]

After submitting the form and resetting it, the intuitive thing is to clear md-select from all sort of errors; Is there a good approach to achieve this ?

Thank you very much.

[willshowell]

After you reset the form, that is what happens. You are asking that by resetting your FormGroup, the FormGroupDirective is also reset. FormGroup and FormGroupDirective aren't coupled in that way due to whatever design decisions were made in @angular/forms.

--

#4190 (comment) pretty much covers it:

1. Submitted state is based on the FormGroupDirective or the NgForm (depending on if you're using template- or model-driven forms). FormGroup does not hold submitted state.

2. If you wish to reset the form, you must gain access to the FormGroupDirective or the NgForm and call resetForm() on it. That will remove .mat-input-invalid from the input and all associated md-errors

3. This behavior is in Angular core, not material. You are welcome to propose a change to the behavior, but that should be done in the angular core repository, not here.

4. If you simply don't want .mat-input-invalid to depend at all on submitted state, you will be able to purpose feat(input): add custom error state matcher #4750 for that once it lands.

[ChakrounAnas]

I think there is a misunderstanding, i understand that in order to remove all errors after submission we need to gain access to FormGroupDirective or the NgForm and call resetForm() on it, but the problem is that just remove .mat-input-invalid from all inputs and not .mat-select.invalid from all selects components !

So my question is how to remove also all .mat-select.invalid from all selects components ?

Thank you very much and i'm sorry if i'm not getting something right.

[willshowell]

I'm still not sure I understand 😄 . Here's an example of this approach clearing the invalid styles for inputs and selects:

https://stackblitz.com/edit/material2-beta11-8ylcrf?file=app%2Fapp.component.ts

And here's some additional clarification, if it helps:

By default, Material shows the invalid styling when the control isInvalid && (isTouched || isSubmitted). This strategy is recommended by the spec. If you want to customize how and when controls show invalid styling, you can use a custom error matcher (the api does have a minor breaking change coming in beta.12).

[mmalerba]

This is working as intended. As @willshowell mentioned, you can use a custom error state matcher to change when errors are shown

[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.}