mdb-select (angular)

web
mobile

Topic: mdb-select (angular)

dario.bratic pro asked 2 years ago

I have a few problems regarding MDB Select in Angular app:

If I push new value in the array it doesn't work, actually, it is not showing new value in the select drop down.

On change event doesn't work as well.

We are using template driven forms.

Here is extra explanation of both issues:

First issue

// product.component.html

<div class="row">

<div class="col-md-6">

<mdb-select [options]="categoriesOptions" placeholder="Select category" class="colorful-select dropdown-primary" name="category" ></mdb-select>

<label>Category</label>

</div>

</div>

 

// product.component.ts

 

ngOnInit {

var option;

this.service.getCategories().subscribe(categories => {

categories.forEach(category => {

option = {

value: category.id,

label: category.name

}

this.categoriesOptions.push(option);

});

});

}

 

It doesn't work, and in dropdown it says "No resoults found".

 

Than i tried this

 

ngOnInit {

var option1 = {value: '1', label: 'option1'}

var option2 = {value: '2', label: 'option2'}

var option3 = {value: '3', label: 'option3'}

var option4 = {value: '4', label: 'option4'}

 

this.categoriesOptions.push(option1)

this.categoriesOptions.push(option2)

this.categoriesOptions.push(option3)

this.categoriesOptions.push(option4)

}

 

And it also doesn't work, which means that you can't push new option.

 

I figure it out that it works only if you create one array, populate it with data and than assign that array to your options array.

 

ngOnInit {

var option1 = {value: '1', label: 'option1'}

var option2 = {value: '2', label: 'option2'}

var option3 = {value: '3', label: 'option3'}

var option4 = {value: '4', label: 'option4'}

 

var categories = [];

categories.push(option1)

categories.push(option2)

categories.push(option3)

categories.push(option4)

 

this.categoriesOptions = categories

}

 

Second issue

 

<mdb-select [options]="categoriesOptions" placeholder="Select category" class="colorful-select dropdown-primary" [(ngModel)]="product.categoryId" name="category" >

</mdb-select>

<label>Category</label>

 

It throws error "Uncaught (in promise): TypeError: Value must be a string or an array." But my value should be categoryId: number. And in form-edit it doesn't bind value from model.

This works fine if I use standard HTML select.


henry steven salazar serrano commented 4 months ago

how can I manage the message "No results found". to put it in other language???????


Sebastian Kaczmarek staff pro premium answered 2 years ago

Hi dario.bratic, Let me address your issues in a list. 1. If I push new value into the array it doesn’t work. [...] I figure it out that it works only if you create one array, populate it with data and then assign that array to your options array. Actually, this is how Angular works. It does not re-render the view unless it detects a change that affects some @Input() or other values bound to the view. To make Angular re-render <mdb-select> you have to change the array with categoriesOptions. A quick workaround for this is reassign the array with options after pushing a new value with this simple line of code: this.categoriesOptions = this.categoriesOptions.slice();   2. On change event doesn’t work as well. Our <mdb-select> does not trigger typical change event. Instead, it emits an event called selected and you use it like this: In app.component.html:
<mdb-select [options]="categoriesOptions" placeholder="Select category" (selected)="log($event)" class="colorful-select dropdown-primary" name="category" ><mdb-select>
and in app.component.ts
  log(e: any) {
    console.log(e)
  }
I hope it helps! Best regards, Sebatian

NCIIT commented 2 years ago

Hi Sebastian It really helped! Could this be added in mdb-select (Angular) description, this would be very helpful.

The Orange Dev House pro commented 8 months ago

You didn't answer the second issue.


henry steven salazar serrano commented 4 months ago

how can I manage the message "No results found". to put it in other language???????


Bartosz Termena staff commented 4 months ago

@henry steven salazar serrano

Just add to <mdb-select> notFoundMsg="Your own message"

Hope it helps. Best Regards, Bartosz.


Damian Gemza staff answered 8 months ago

Dear @The Orange Dev House

Could you please describe your problem? What's wrong?

Please explain your problem, because this ticket is 1 year old.

Best Regards,

Damian


With the above, the category (product.categoryId) is not selected. The mdb-select would be blank.


Arkadiusz Idzikowski staff commented 8 months ago

We will take a closer look at this problem.


The Orange Dev House pro commented 8 months ago

Our live project is dependent on this. We await to hear from you soon.


Still no response from your team. We are a paying customer.


Arkadiusz Idzikowski staff commented 8 months ago

We are still working on this issue, however, we have some problems reproducing this bug.

Could you provide an example html and ts code that is not working for you? Which version of MDB Angular do you use?


Damian Gemza staff answered 7 months ago

Dear @The Orange Dev House

Could you please describe, what's wrong with selecting the number in <mdb-select> element?

Please take a look at the below code - There's a select's data array objects: {value: number, label: string}, and I'm able to preselect number value from the beginning.

.html:

<mdb-select [(ngModel)]="selectedValue" [options]="dateOptionsSelect" placeholder="Choose time period"></mdb-select>

.ts:

dateOptionsSelect= [
    { value: 1, label: 'Today'},
    { value: 2, label: 'Yesterday' },
    { value: 3, label: 'Last 7 days', selected: true  },
    { value: 4, label: 'Last 30 days' },
    { value: 5, label: 'Last week' },
    { value: 6, label: 'Last month' }
  ];
  selectedValue = 3;

Please let me know because as I see, there's nothing wrong (tested with the 7.5.1 version).

Best Regards,

Damian


Please insert min. 20 characters.
Status

Answered

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