angular-formly multiCheckbox Select All

I have a multiselect field in angular-formly, with the following options:

vm.fields = [
    {
    key: 'fruits',
    type: 'multiCheckbox',
    className: 'multi-check',
    templateOptions: {
        label: 'Fruits:',
        options: [
            {
                "name": "ALL",
                "value":"ALL"
            },

            {
                "name": "apple",
                "value":"apple"
            },
            {
                "name": "orange",
                "value":"orange"
            },
            {
                "name": "pear",
                "value":"pear"
            },
            {
                "name": "blueberry",
                "value":"blueberry"
            },
        ],
    },

  },

];

When I select/unselect "ALL", I want all the options to be selected/unselected. For Example. If ALL is checked, then all the fruits options( apple, orange, pear, blueberry) should be checked as well

If I unselect ALL, then none of the fruit options should be checked.

How do I enable this behavior in angular-formly?

Here is the link to jsbin: https://jsbin.com/xololi/edit?html,js,output

Solution

I wrote a working example here https://jsbin.com/dukewac/6/edit?js,output

The signature of templateOptions.onClick when a function is $modelValue, fieldOptions, scope, event. This occurs when the ngModelAttrsTemplateManipulator is run. I leveraged these variables in my function.

Some of it is a bit hacky but that partially has to do with how angular implements checkboxes and the workarounds that the multiCheckbox type in angular-formly-templates-bootstrap employs.

Gotchas

Nested Keys

This example will not work with nested keys but should if the multiCheckbox type was updated. This is because it is directly accessing the model using array access notation [see the code here] (https://github.com/formly-js/angular-formly-templates-bootstrap/blob/a69d69e5c3f6382ea6a6c028c1d8bf76a9b94db3/src/types/multiCheckbox.js).

Hardcoded "all" option

The code also assumes that the 'ALL' option is the first in the list and that its value is 'ALL'. This could be fixed by adding a templateOption property that references what the index and value the all functionality is for.

Model contains 'ALL'

'ALL' will appear in your model. A possible way to get around this would be to define a $parser for it.

No support for `templateOptions.valueProp`