Multiselect dropdowns with Angular Formly and UI-Select

In this article we'll be making multiselect dropdowns with Angular Formly and UI-Select, working with Formly is both pain as well as rewarding trust me on this one, I've used formly enough to make this comment: Formly is shit! (to implement) but its really good once you get the hang of it.

There are a few things about formly that I absolutely hate is that for every other type of field we require a plugin installed, even for smallest of things, this might be formly's way of modularizing the plugins but it surely creates a mess when it comes to managing those plugin dependencies.

Anyways we are not here to talk about the pros and cons of formly we're here to integrate multiselect dropdowns using ui-select and Angular Formly. In this example we'll create a common reusable Formly method that can be used with different types of data sets.

// this is a custom method that returns a ui-select dropdown for given set of data notice the various parameters that it take so it can be customized based on the type of datavar multiSelectDropDown = function(key, label, data, valueProp, labelProp, required){
return [
{
key: key,
type: 'ui-select-multiple',
templateOptions: {
optionsAttr: 'bs-options',
ngOptions: 'option[to.valueProp] as option in to.options | filter: $select.search',
valueProp: valueProp,
labelProp: labelProp,
label: label,
placeholder: label,
options: data,
required: required
}
}
];
};
// usage
$scope.multiRegion = multiSelectDropDown("region", "Region", $scope.constants.regions, "key", "value", false);
// I believe its pretty clear as to what is happening here, "$scope.constants.regions" is the data for that dropdown, refer to jsbin demo below

This here looks very simple and infact it is, you can now generate as many dropdowns you want with this simple method and without having to repeat any of the html or any other hazard involved with it, the only thing I feel with this is that, we need to use too many plugins to make a thing, simple as this to work but other than that this is really a life saver.