mdb-select binding issue


Topic: mdb-select binding issue

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 6 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


Damian Gemza staff answered 6 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


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 6 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


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


That worked.

Thanks!


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


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
  • User: 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