Topic: mdb-select (angular)
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.
@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 7 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 6 years ago
You didn't answer the second issue.
henry steven salazar serrano commented 5 years ago
how can I manage the message "No results found". to put it in other language???????
Bartosz Termena staff commented 5 years ago
Just add to <mdb-select> notFoundMsg="Your own message"
Hope it helps. Best Regards, Bartosz.
Sujan Maharjan commented 4 years ago
when [multiple] ='true', the event is undefined. Could you please look into it?
Also (selected) triggers event only when the value is selected, when trying to unselect the selected item, the event is not triggered.
Its so disappointing that this mdb-select doesnt have enough features.
Arkadiusz Idzikowski staff commented 4 years ago
@Sujan Maharjan please provide more information about the problem. Which version of MDB Angular library do you use and which select component (mdb-select or mdb-select2)?
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 6 years ago
We will take a closer look at this problem.
The Orange Dev House pro commented 6 years 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 6 years 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?
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
henry steven salazar serrano commented 5 years ago
how can I manage the message "No results found". to put it in other language???????