question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-select errors still displayed even after resetting formGroup

See original GitHub issue

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 : https://github.com/angular/material2/issues/4190

Thanks.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
willshowellcommented, Oct 4, 2017

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.

https://github.com/angular/material2/issues/4190#issuecomment-311488176 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 https://github.com/angular/material2/pull/4750 for that once it lands.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 7, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular material 2 get rid of md-select errors after resetting formGroup
After debugging i noticed that even after resetting the form the class mat-select-invalid still associated with the md-select. is there any solution ?...
Read more >
FormGroup - Angular
You reset to a specific form state by passing in a map of states that matches the structure of your form, with control...
Read more >
To reset a form or to resetForm? - ITNEXT
This does not seem right. The validation error message Name is required is still shown on the form even if we have reset...
Read more >
Chapter 9: Forms - Angular in Action - liveBook · Manning
Creating forms using Angular's forms libraries; Deciding between using Reactive or Template forms; Validating forms with custom logic; Accessing data and ...
Read more >
angular reset form without triggering validation - You.com
How to reset validation error without resetting form in angular? ... With that you can choose when to show the error messages. Open...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found