bug(forms): Date range picker incorrectly has matStartDateInvalid error after hiding component

[blyndcide]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-uotl3m?file=src%2Fapp%2Fdate-range-picker-forms-example.html

Steps to reproduce:

1. Pick a date range in date picker.
2. Hide then show the date range picker with the toggle button.
3. Pick the date range again at a date later then the previous range.

Expected Behavior

What behavior were you expecting to see?
I do not expect to see a start date error.

Actual Behavior

What behavior did you actually see?
I see a start date error.

Environment

• Angular: 10.2.7
• CDK/Material: 10
• Browser(s): Edgeium
• Operating System (e.g. Windows, macOS, Ubuntu): windows 10

Seems this is linked to #39235 . Want to make sure there is a specific simple example here to test against.

[AndrewKushnir]

Hi @blyndcide,

Thanks for reporting the issue and providing a repro.

I've tested the behavior with the changes from PR #39235 that improves internal cleanup logic in Forms package (to also cleaning up validator functions from destroyed components) and everything seems to be working fine. You can also test the behavior locally by using Forms package with the fix from #39235 as described here. Note: the package from the #39235 is not suitable for production use and it will be removed within a couple weeks.

Please let us know if the changes from #39235 resolve the problem on your app.

Thank you.

[AndrewKushnir]

Quick update: the fix (PR #39235) was merged and should be available in v11.1.0 release later this month.

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