Topic: mdb-select binding issue
bryan.benauro@da.kyocera.com pro asked 5 years ago
I have a collection of lists that I'm displaying with mdb-select components. I'm binding the selected values using [(ngModel)] pointed to an array of strings.
Expected behavior
The selected values bound to [(ngModel)] are displayed as selected in the component.
Actual behavior
When there are two or more mdb-selects, only the last component displays the selected values.
Resources (screenshots, code snippets etc.)
This can be easily duplicated with a sample list:
-------- TS --------------
this.Filters = {
"Fields" : [
{
Type : "ListField",
Name : "List1",
Items: [
{label: "test1", value: "test1"},
{label: "test2", value: "test2"},
{label: "test3", value: "test3"},
{label: "test4", value: "test4"}
],
FilterValue: ["test1"]
},
{
Type : "ListField",
Name : "List2",
Items: [
{label: "val1", value: "val1"},
{label: "val2", value: "val2"},
{label: "val3", value: "val3"},
{label: "val4", value: "val4"}
],
FilterValue: ["val1"]
}
]
};
-------------- HTML -----------------
Inside the form (I'm having some trouble posting the full html snippet)
<div class="md-form" *ngFor="let currItem of Filters.Fields;index as i">
<div [ngSwitch]="currItem.Type">
<!-- ListField Type -->
<div *ngSwitchCase="'ListField'" class="md-form">
<mdb-select name="{currItem.Name}" [multiple]="true" [(ngModel)]="currItem.FilterValue" [options]="currItem.Items" label="{{currItem.Name}}" [filterEnabled]="true"></mdb-select>
</div>
Damian Gemza staff answered 5 years ago
Dear Bryan,
The problem comes from Angular, not from our MDB.
There's some problem with form
tag, *ngFor
and ngModel
directives. Please add the [ngModelOptions]=" {standalone: true }"
to the mdb-select elements.
Here you can read more about this problem: https://github.com/angular/angular/issues/13955
Best Regards,
Damian
bryan.benauro@da.kyocera.com pro answered 5 years ago
That worked.
Thanks!
donb9261 free commented 5 years ago
What worked? May I ask?
Arkadiusz Idzikowski staff commented 5 years ago
You need to add [ngModelOptions]=" {standalone: true }" to mdb-select elements. Please take a look at the post selected as 'best answer'.
bryan.benauro@da.kyocera.com pro answered 5 years ago
Dear Damian,
Unfortunately, the actual Filters list is not static, so using *ngFor is a requirement. Do you know of any other type of workaround in the meantime?
Should I report this bug on Git so I can track it?
Thanks,
Bryan
Damian Gemza staff answered 5 years ago
Dear Bryan,
We have to debug this problem on our own. We'll let you know when we'll discover, what's wrong there.
For now, please don't use the *ngFor to loop through every Filters fields, but create those selects as static markup code in .html file, because without the loop, there's no such problem.
Best Regards,
Damian
bryan.benauro@da.kyocera.com pro answered 5 years ago
Hey Damian,
Thanks for the response. The issue occurs when the components are inside a form.
I'm sorry I didn't include the form tags in my sample HTML, but like I said, I was having issues posting the html code. Whenever I tried to include the form in the code snippet, it was dropping everything after the < form > tag. ( I now see that I should use spaces!)
Yes, I'm using 7.4.3. When I comment out the form tags, I can't duplicate the issue either. So it seems the issue only occurs when inside a form.
Thanks
Damian Gemza staff answered 5 years ago
Dear Bryan,
I have tried to reproduce your problem using your code, but without success.
For me, the mdb-select
components are displaying the value with ngModel correctly.
Please take a look at the screenshot: https://screenshots.firefox.com/7IQkniSojn6Q9ljN/localhost
The code which i'm using:
.html:
<div class="row">
<div class="col-md-6 mx-auto my-5">
<div class="md-form" *ngFor="let currItem of Filters.Fields;index as i">
<div [ngSwitch]="currItem.Type">
<!-- ListField Type -->
<div *ngSwitchCase="'ListField'" class="md-form">
<mdb-select name="{currItem.Name}" [multiple]="true" [(ngModel)]="currItem.FilterValue" [options]="currItem.Items" label="{{currItem.Name}}" [filterEnabled]="true"></mdb-select>
</div>
</div>
</div>
.ts:
export class AppComponent {
Filters = {
"Fields" : [
{
Type : "ListField",
Name : "List1",
Items: [
{label: "test1", value: "test1"},
{label: "test2", value: "test2"},
{label: "test3", value: "test3"},
{label: "test4", value: "test4"}
],
FilterValue: ["test1"]
},
{
Type : "ListField",
Name : "List2",
Items: [
{label: "val1", value: "val1"},
{label: "val2", value: "val2"},
{label: "val3", value: "val3"},
{label: "val4", value: "val4"}
],
FilterValue: ["val1"]
}
]
};
}
Are you sure, that you have imported the FormsModule correctly in your application? Which version of MDB you're using? 7.4.2?
Could you please check, if this problem exists with the 7.4.3?
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.2
- Device: PC
- Browser: Chrome, Firefox, Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: No