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



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'.



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



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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • 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