CODEWITHSUNDEEP
angular-material
rubixkube
rubixkube

Reputation: 97

Angular Material Select not showing defaulted selection

Within a form, I can't get a preselected option to show up on a select. If you look at material select example without the form elements, it works, but with form, while the model is correct and if I hit "submit" on my form it works, but I'd really like it to display the defaulted answer upon opening the form.

https://stackblitz.com/edit/angular-5367rp?file=app%2Fselect-hint-error-example.html

It should look like the example (Select with two-way binding) at: https://material.angular.io/components/select/examples where "Option 2" is clearly preselected.

Upvotes: 1

Views: 48

Answers (1)

G. Tranter
G. Tranter

Reputation: 17908

When using forms, you usually don't bind to the 'value' property because the form control effectively replaces it. So to 'pre-select' a value, you set it on the form control:

animals: Animal[] = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
];
// selected = "Dog"; // don't use this
animalControl = new FormControl(this.animals[0], [Validators.required]);

Upvotes: 1

Related Questions