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.

Problem populating md-select options when using in reactive forms

See original GitHub issue

<md-select placeholder="Profile" [formControl]="profilesFormControl">
    <md-option *ngFor="let profile of profiles" [value]="profile"> 
        {{ profile.Name }}
    </md-option>
</md-select>

Following normal select box populates fine:

<select >
    <option [ngValue]="profile" *ngFor="let profile of profiles">
        {{ profile.Name }}
    </option>
</select>

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Successfully populate md-select control

What is the current behavior?

md-select control does not populate whereas If I use normal <select> works just fine.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 4.2.5 Material: 2.0.0-beta.8 OS: Windows 10 x64 Typescript: 2.3

Issue Analytics

State:
Created 6 years ago
Comments:13 (7 by maintainers)

Top GitHub Comments

5reactions

alaboudicommented, Jan 20, 2018

has this issue been closed? I can’t populate ‘mat-select’ by using reactive forms. Should I open a ticket with an example?

2reactions

julianobrasilcommented, Oct 6, 2017

@rafaelss95 also has an example of compareWith here :https://github.com/angular/material2/issues/6970#issuecomment-328355857

Top Results From Across the Web

Unable to populate dropdown in angular reactive form

When using mat-select in Reactive form, you need to have FormControl ... So click on get data first, then you'll see the dropdown...

Angular Select Option using Reactive Form - ConcretePage.com

In Angular, SelectControlValueAccessor writes values and listens changes for select element. This directive works for both FormsModule and ...

Angular 14 Select Dropdown with Reactive Forms Examples

We will reveal how to build single and multiple select dropdown in Angular, add the validation in select box using Reactive Forms.

SelectControlValueAccessor - Angular

Tracks the option comparison algorithm for tracking identities when checking for changes. Descriptionlink. Using select controls in a reactive formlink.

The Ultimate Guide To Angular Reactive Forms - Briebug Blog

The Angular documentation states: "Reactive forms use an explicit and immutable approach to managing the state of a form at a given point...