Unable to bind NgModel to Select with static options

We have tried multiple ways of doing this, but it doesnt seem to be working. Whenever we try to bind a select with ngModel the (already populated) initial value never gets set. On the example project it does… I cant tell what is different, I know there is a thrid part issue with the modal options (materializecss causing that) but with this I am at a loss… this is an absolute must have, and its not working as intended, is there some sort of configuration i am missing?

<mz-select-container class="col s6">
  <select mz-select
    id="options-select"
    [label]="'Label'"
    [placeholder]="'Select a Title'"
    [(ngModel)]="editTherapist.title">
    <option [ngValue]=1>BCBA</option>
    <option [ngValue]=2>RBT</option>
  </select>
</mz-select-container>

[detchison]

Doesn’t work either way, we have moved onto using Reactive forms and setting the values that way

[jfcere]

Hi @detchison,

Thanks for reporting the issue. With your code sample I’ve been able to reproduce the problem. The demo application example that works with ngModel uses ngFor on options. If I use it on your example it works great.

We are going to fix it with static options but in the meanwhile you could use it that way…

example.component.html

<mz-select-container class="col s6">
  <select mz-select
    id="options-select"
    [label]="'Label'"
    [placeholder]="'Select a Title'"
    [(ngModel)]="editTherapist.title">
    <option *ngFor="let title of titles" [value]="title.value">{{ title.text }}</option>
  </select>
</mz-select-container>

example.component.ts

titles = [
  { value: 1, text: 'BCBA' },
  { value: 2, text: 'RBT' },
];

editTherapist = {
  title: 1,
};