Angular2-multiselect-dropdown reactive forms

[MarcoLeko]

On the reactive forms approach of your example you included ngModel. But this is wrong since ngModel should ONLY be used in the template driven approach (depracted Angular v.6 and will not be usable in v.7). If I eliminte the ngModel of your example, the example does not work anymore. Therefore the reactive forms approach does not work. Maybe an approach to fix this, is if you bind the selectedLabels with [value]="selectedLabels"

##Versions:

Angular: 6.1.4 angular2-multiselect: 2.5.0

[rohit2sharma95]

As you can see here, we can not use ngModel with the formControlName or formControl. As the selector for the ngModel is:

[ngModel]:not([formControlName]):not([formControl])

So, now the example shown in the documentation no longer works when not using ngModel with the formControl. Thanks @MarcoLeko for pointing out it.

[colinscz]

I would also be highly interested in a fix of this one. I think I run in the same issue. @rohit2sharma95 if I understood your post correctly you found a workaround? can you post an example?

[Local9]

I don't even know why you're using the ngModel, it works fine without it if using formControlName. The ngModel is only being used as a hack in the examples in my option instead of using this.form.find("fieldControlName").value to return the value of the form when using formControlName. Maybe even a copy an paste error.

If I know what you're doing then it may help change how I see the use of this control.

Note, I store the whole object in my application as I find that the best path for what I am doing, if its different for you it maybe worth building something that builds the selected objects and then attaches it to the form group item value?

[MarcoLeko]

People can't state that the approach of reactive Forms is usable, while showing an example with template driven Forms. Its the same like I came to buy for my new lambo and all I see is an old vw-polo. Than please refactor the examples in the docs. Or remove the reactive forms section, if it does not work.

[Local9]

Reactive forms does work, only the documentation on reactive forms needs updating.

@CuppaLabs change the following, I believe was a copy and paste error for efficiency;

https://cuppalabs.github.io/angular2-multiselect-dropdown/#/usinginreactiveform

Remove: selectedItems and all console logs to it in the component file and remove '[(ngModel)]="selectedItems"' from the html. This is causing confusion and doesn't comply with Angulars changes: https://angular.io/api/forms/FormControlName#use-with-ngmodel

The component will still work.

[BigGillyStyle]

On my team we are using version 2.10.2 and are trying to upgrade to Angular 7. Our code follows the reactive forms example including the usage of [(ngModel)] in the template (bound to a variable that's not even defined in the component). If I remove the [(ngModel)] attribute, I get the following error in the JS console if I select even a single element in the control:

ERROR TypeError: this.selectedItems.push is not a function
    at AngularMultiSelect.push../node_modules/angular2-multiselect-dropdown/multiselect.component.js.AngularMultiSelect.addSelected (multiselect.component.js:217)
    at AngularMultiSelect.push../node_modules/angular2-multiselect-dropdown/multiselect.component.js.AngularMultiSelect.onItemClick (multiselect.component.js:139)
    at Object.eval [as handleEvent] (AngularMultiSelect.html:185)

That is a reference to this line of code: https://github.com/CuppaLabs/angular2-multiselect-dropdown/blob/2.10.2/src/app/angular2-multiselect-dropdown/multiselect.component.ts#L277

[BigGillyStyle]

One interesting note from a little more testing...if when I load the page I select a single item from the list I get the stack trace I mentioned above. However, if I click "Select All" first and even then immediately de-select...then I can start selecting and de-selecting individual items in the list.

[Irfan223]

how to implement filter data which is coming from server and filter with this library based on id or itemName. please help

[Local9]

@BigGillyStyle Please make sure you have updated the 'primaryKey' in the drop down settings as by default this is 'id'. This was my problem when I wasn't sending an 'id' field in the data.

 defaultSettings: DropdownSettings = {
        primaryKey: 'id',
}

@Irfan223 That doesn't fit with the discussion here but I would look at the documentation here or look at the custom Search API

[BigGillyStyle]

@BigGillyStyle Please make sure you have updated the 'primaryKey' in the drop down settings as by default this is 'id'. This was my problem when I wasn't sending an 'id' field in the data.

 defaultSettings: DropdownSettings = {
        primaryKey: 'id',
}

Thanks for the tip @Local9 I'll check my code for that.

[Korigoth]

It does work with reactive form, my only problem with it is that when i put the whole collection as item selected, the select all is not checked... why ?

[Local9]

@Korigoth I'd look into how the process is running during its setup as it should be setting it as shown below.

ngDoCheck() {
    if (this.selectedItems) {
        if (this.selectedItems.length == 0 || this.data.length == 0 || this.selectedItems.length < this.data.length) {
            this.isSelectAll = false;
        }
    }
}

[lakarpusky]

I does work with reactive forms, just remove the [(ngModel)]="someValue" and add formControlName without the binding [ ], like this formControlName="controlName", that worked for me. The docs need to be updated.

[sivailangos]

If I remove the [(ngModel)] then It did not set the selected values. Also In reactive forms, I could not make disable based on condition. When I debug by this.form.get('control-name'), could see disabled: true but it's not updated on UI it seems

[somq]

template

  <form [formGroup]="chips">
    <tag-input *ngIf="chipsList.length > 0"
      formControlName="tags"
      [hideForm]="true"
      [removable]="false"
      [disable]="true"
      [theme]="'bootstrap'"
      [identifyBy]="'id'"
      [displayBy]="'itemName'"
    >
    </tag-input>
  </form>

component

  ngOnInit() {
    this.chips = new FormGroup({
      tags: new FormControl(this.value, []) // add validators here
    });
    this.chips.get('tags').setValue([{{ id: "QMpEIq4Qrc", itemName: "NAME" }}])
  }
  get chipsList() {
    return this.chips.get('tags').value
  }

[nareshkumarhk]

The work around works- just remove the [(ngModel)]="someValue" and add formControlName without the binding [ ], like this formControlName="controlName"

But how about binding selected values.. am stuck - if anyone have solved this - please help

[nareshkumarhk]

Thanks @somq - got the intent behind setValue.

this.chips.get('tags').setValue([{{ id: "QMpEIq4Qrc", itemName: "NAME" }}])

This works like a charm