You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Deporte
@for (sport of (sports$ | async); track sport.id) {
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.
the problem is not specific to Angular, I got the problem when working with Vue.
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/web@1.4.x / 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: