How to bind data of multiselect dropdown of primeng Angular

Question

I am using primeng Multiselect dropdown in a form.

While clicking on the edit button I want to display the existed data in all the field. for Input text it is displaying as I am using [(ngModel)] and I have tried the same for Multiselect dropdown as well but it is not working.

so I am unable to bind the values of multiselect dropdown. I have tried using the for Loop but the values are not coming in the field.

      <div *ngFor ="let role of resource.roles;">
        {{role.name}}
        <p-multiSelect
        [options]="resourceRoles | dropdownToValuePipe"
        placeholder="Select"
        name = "roles"
        id="roles"
        [(ngModel)]="role.name"
        ngModel
        required
        appendTo="body"
      >
      </p-multiSelect>
      </div>

score 0 · Answer 1 · answered Jan 25 '21 at 16:55

0

With your current code, you are creating one multiselect per role the resource/user has. I assume this is not what you want, otherwise you would probably just use a normal dropdown.

So if you really want only one multiselect, you would do something like this:

  <p-multiSelect
    [options]="resourceRoles"
    optionLabel="name"
    placeholder="Select"
    name="roles"
    id="roles"
    [(ngModel)]="resource.roles"
    required
    appendTo="body"
  >
  </p-multiSelect>

I wasn't sure what the pipe was doing, you might not need it if you use optionLabel. I also removed the duplicate ngModel.

You might want to also play around with using dataKey="roleId" if the objects in resource.roles are not the same objects as in resourceRoles. This would match selections based on roleId instead of using object equality

answered Jan 25 '21 at 16:55

Kevin Doyon

3,464
2
33
38

Thanks for the try @kevinDoyon. Yes from the multiselect dropdown I am adding the values like (backend dev, Front dev, Team lead etc.) . So I want to bind these options and display it when I edit the form again. I tried with your above code but it is displaying Empty instead of values. – Akanksha Mohanty Jan 25 '21 at 17:42
Did you try adding `dataKey="roleId"` or `dataKey="id"` or whatever unique id property you are using? – Kevin Doyon Jan 25 '21 at 17:45
Yes. dataKey = "id" No changes. dataKey="resource.roles.id" all the options checkbox was selected so I thought not the right way. – Akanksha Mohanty Jan 25 '21 at 17:51
See this stackblitz, maybe it will show you what's wrong: https://stackblitz.com/edit/angular-ivy-bn7st5 If you provide a stackblitz like that when you asks questions, with the minimal code that can reproduce the problem, it helps the people answering a lot – Kevin Doyon Jan 25 '21 at 18:19
Here is the Stackblitz - https://angular-ivy-hy3ffv.stackblitz.io/ . I have just added the Multiselect dropdown and buttons. basically when I select some items from dropdown and save it and when edit button is clicked all the added items from the dropdown should be visible. – Akanksha Mohanty Jan 27 '21 at 12:13
I don't understand what you're trying to do. The save button you added does nothing, and the edit button calls something that doesn't exist. I don't know what you mean by "added items from the dropdown should be visible". Isn't that already doing that, by just using the multiselect control? You select something in the multiselect, and it displays what you selected? You're also binding the multiselect on the property of an array (`this.resourceRoles.name`) which is weird? – Kevin Doyon Jan 28 '21 at 20:40

How to bind data of multiselect dropdown of primeng Angular

1 Answers1