-
Notifications
You must be signed in to change notification settings - Fork 826
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
md-select-option selected not getting selected on angular reactive form #5590
Comments
In my case, the issue appears to be caused by dynamically populating md-select-option(s) causing the select to appear blank even though the option is selected when you open the menu. The weird thing though is that sometimes the select is blank and sometimes the select isn't blank. |
I was able to reproduce this without frameworks. @austinw-fineart guess is correct. |
I also had a similar issue when setting the selected value without any framework, discord discussion and workaround here |
What is affected?
Component
Description
When I try to use md-outlined-select with Reactive Forms on Angular 17
Reproduction
In Angular, I have a form with Reactive Forms, it has a couple of Inputs, Selects, and a Submit button to perform a search. When navigating to another route and returning to my search page, the input fields do show the previously entered values, but this does not happen with the Selects.
However, if I use the Selects with ngModel using Template-driven forms, all the select fields work correctly.
Selects doesn't works with Reactive Forms on Angular 17.x:
Workaround
Using Template-drive Forms works:
<md-outlined-select [(ngModel)]="sportId" ngDefaultControl>
<md-select-option *ngIf="!sport" disabled value="">
@for (sport of (sports$ | async); track sport.id) {
}
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
@material/[email protected] / and nightly
Browser/OS/Node environment
Brave Version 1.64.122 Chromium: 123.0.6312.122 (Official Build) (64-bit)
Chrome / Firefox on Arch Linux 6.8
Node 18.18.2
Angular 17.0
The text was updated successfully, but these errors were encountered: