Search code examples
javascriptangularjsangular-formly

Can a className property be dynamic in formly forms


Is there a way to make formly form's field's className dynamic?

I want a field's className to change based on a variable.

For example if vm.isTrue == truethen className: 'col-xs-2', else 'col-xs-5'.

I've tried this:

{
    className: 'col-xs-2',
    key: 'maintenanceYN',
    type: 'input',
    templateOptions: {
          disabled: vm.locked
    },
    expressionProperties: {
          'className': function() {
                   if(vm.isTrue == true) {
                        return 'col-xs-2'
                   } else {
                        return 'col-xs-5'
                   }
           }
     }
}

Solution

  • Have you tried putting the conditional straight in the className property, as such:

    {
        className: vm.isTrue ? 'col-xs-2' : 'col-xs-5',
        key: 'maintenanceYN',
        type: 'input',
        templateOptions: {
              disabled: vm.locked
        }
    }