Problems to pre-select options in mz-select about ngx-materialize HOT 4 CLOSED

I suggest you to remove [selected]="option.uuid == selectedGroup.uuid" its not recommmend to use this attribute.

from ngx-materialize.

So the "selected" attribute would be bound by the values of the model?

I have another example in my code, a little simpler, using ngModel instead of formControlName.

<mz-select-container>
        <select id="select-status" mz-select [(ngModel)]="selectedStatus" multiple>
          <option *ngFor="let option of groupStatus" [value]="option.value">{{ option.label }}</option>
        </select>
</mz-select-container>

groupStatus = [{"value":"ACTIVE","label":"Active"},{"value":"INACTIVE","label":"Inactive"}]
selectedStatus = [{"value":"ACTIVE","label":"Active"}]

The same problem happens, the option "Active" should be pre-selected when the select component is rendered.

from ngx-materialize.

In this exemple, you should use ngValue instead of value because your selected value is an object.

Here what it should look like :

<mz-select-container>
        <select id="select-status" mz-select [(ngModel)]="selectedStatus" multiple>
          <option *ngFor="let option of groupStatus" [ngValue]="option">{{ option.label }}</option>
        </select>
</mz-select-container>

Or if you wantto keep only the string as value, you will have to change the selectedStatus to :

selectedStatus = ["ACTIVE"]

You can look at this document on Angular.io for good example : https://angular.io/api/forms/SelectMultipleControlValueAccessor

from ngx-materialize.

Thank you very, I removed the selected attr and kept the options values as strings, and it worked in both cases!

Tks again!

from ngx-materialize.