Search code examples
angularbootstrap-multiselect

Use reactive form with angular 2 dropdown multiselect


I'm trying to use the angular 2 dropdown multiselect library with reactive forms.

I have followed the tutorial for reactive model and have this:

this.myOptions = [
    { id: 1, name: 'English' },
    { id: 2, name: 'French' },
];

this.form = this.formBuilder.group({
    langs:[1, 2]
});

And in my html (in pug):

ss-multiselect-dropdown([options]='myOptions', formControlName='langs')

And get the following error: TypeError: this.validator is not a function

So I've tried:

this.form = this.formBuilder.group({
    langs:this.formBuilder.array([1, 2])
});

And get the following error: TypeError: control.registerOnChange is not a function

What am I doing wrong? Is this a bug?

You can see a plunker here


Solution

  • As I understand from your Question that, You want to select both values on init.

    this.myForm = this.formBuilder.group({
      optionsModel: [[1,2]] // Default model
    });
    

    Both values will be selected default

    Updated Plunker : https://plnkr.co/edit/tvLYUzgsCkXODXX6qKrN?p=preview