Dynamic switch label and description? And a bug in switch and checkbox found

[mishelka]

Please is there a way to make the switch label and description dynamic according to the selected value? E.g.:

{ key: 'active', type: 'lx-switch', templateOptions: {
    checked: 'active', 
->  label: 'Active', 
->  description: 'If switched off, the applicant will become inactive.'
} }

but I need:

{ key: 'active', type: 'lx-switch', templateOptions: {
    checked: 'active', 
->  labelTrue: 'Active', 
->  labelFalse: 'Inactive', 
->  descriptionTrue: 'If switched off, the applicant will become inactive.'
->  descriptionFalse: 'If switched on, the applicant will become active.'
} },

An example of what I need can be seen in Angular material library (the first switch): https://material.angularjs.org/#/demo/material.components.switch

We also found a bug in initialization of the switch or checkbox states (checked: 'active' is not working). Defaultly, they were both switched on in templates, not initialized by the model. You should change the templates as follows:

lx-checkbox:

<div class=\"checkbox\"><input ng-model=\"model[options.key]\" type=\"checkbox\" role=\"checkbox\" class=\"checkbox__input\"><label for=\"{{::id}}\" class=\"checkbox__label\" aria-label=\"{{::to.label}}\">{{to.label}}</label><span ng-if=\"::to.description\" class=\"checkbox__help\">{{::to.description}}</span></div>

lx-switch:

<div class=\"switch\"><input ng-model=\"model[options.key]\" type=\"checkbox\" role=\"checkbox\" class=\"switch__input\"><label for=\"{{::id}}\" class=\"switch__label\" aria-label=\"{{::to.label}}\">{{to.label}}</label><span ng-if=\"::to.description\" class=\"switch__help\">{{::to.description}}</span></div>

[kentcdodds]

For the dynamic description, look into using expressionProperties (See the docs)

[ShMcK]

@mishelka, there's another way to trigger the pre-checked status. If you provide a model, you can set the value to true. I found this works better than using ng-checked=true or aria-checked=true as the data is better suited for the model.

$scope.model = {
    item1: true,     // pre-checked
    item2: ''
};

I'll take a look at your switch/checkbox suggestions now.

[ShMcK]

Ah, so you just want to drop the one-way bindings on the label, then use expressionProperties to change the label?

As in this edit label example.

It is really a toss up between performance or greater flexibility. I think for most use cases, dynamic labels aren't really necessary and performance may be a greater general concern. Wherever needed you can always just drop the :: bindings on your templates within the dist/formlyLumx.js file.

Also feel free to customize or create all kinds of new templates. Angular-Formly is fantastically flexible.

[mishelka]

Okay, I will try to modify the template, thank you. Also thank you for the video with expressionProperties, it's very good :)

[ShMcK]

I think I'll rewrite the formlyLumx templates using webpack. Then it will be easier for people to change the templates to fit their needs. You will simply require the html templates you want. It really should be easier than editing a formlyLumx.js file full of strings.

[ShMcK]

@mishelka with formlyLumx@1.5 it should now be easier for you to edit and customize your own templates. I remade the module with Webpack. Just change your templates in src/fields, then run webpack in the console to build the templates.

[kentcdodds]

Awesome! Webpack rocks! Noticed that master is behind 1.5.0. Is this intentional?

[ShMcK]

Should be 1.5.1 now, had a bug with checkboxes.