Topic: Material Select Doesn't Support biding to [(ngModel)]

rctoone pro asked 5 years ago

There doesn't seem to be a way to bind the material select component to an ngModel

<mdb-select #productTypeSelect name="productTypeSelect" [options]="productDetailEditOptions.productTypeOptions" [(ngModel)]="blankProduct.productType"></mdb-select>

<label>Product Type

<i class="fa fa-angle-down float-right"aria-hidden="true"></i>



When i have the code above it gives a java script error.

ERROR Error: Uncaught (in promise): TypeError: Value must be a string or an array.
TypeError: Value must be a string or an array.

Is there a way to set the value with a model? All the other mdb components i have used support binding to an ngModel so it seems a bit out of place that material select doesn't support this.

In my code blankProduct.productType is an object with the following { label: string, value: string } which is the same object used for the [options]

Alberto pro commented 5 years ago

Did you try using ToArray() on your observable?

rctoone pro commented 5 years ago

Sorry but that didn't work i also tried passing in a string. I should clarify that the error i am getting is coming from angular not mdb. Which likely means i am not using the component correctly or MDB does not support this.

rctoone pro commented 5 years ago

Has anyone been able to use the Material Select component and two way bind with [(ngModel)]?

Dawid Adach pro commented 5 years ago

Could you also provide .ts part to see what type of data are you trying to bind?

rctoone pro commented 5 years ago

so the [options] binding works using array of objects of the following: export class MdbSelectOption { value: string; label: string; } I used the same class for the [(ngModel)] binding. I would expect that the [(ngModel)] binding to work on the same object. Though you don't have any documentation to support this. Can you provide documentation with an example of using Material Select with two way [(ngModel)] binding?

Dawid Adach pro commented 5 years ago

Dear rctoone, we will update our docs shortly, please refer to the following topic: you will find example over there.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No