Dynamically changing the glyphicon of input add on

Question

How to change **glyphicon" (right side of input field (see below)) on validation of input type ?

eg. When input is valid, change it to glyphicon-ok (tick mark ) or when it is invalid change it to glyphicon-remove ( cross sign )

vm.rentalFields = [
    {
        key: 'first_name',
        type: 'input',
     //   class:glyphicon-ok,

        templateOptions: {

            type: 'text',
            label: 'First Name',
            placeholder: 'Enter your first name',

            required: true,
            "addonRight": {
                "class": "glyphicon glyphicon-ok form-control-feedback"
              }




        }
    }];

Answer 1

With angular-formly, if you want anything to be dynamic, you use expressionProperties. Because you want the class property of addonRight to be dynamic, your expressionProperties property for that will be:

'templateOptions.addonRight.class': '"glyphicon form-control-feedback glyphicon-" + (fc.$valid ? "ok" : "remove")'

The values of expressionProperties are called formly expressions which basically means they can be strings which are evaluated on the formly-field's $scope or a function that is passed ($viewValue, $modelValue, scope) and can return the value or a promise that resolves to the value.

The fc you see in that expression is a shortcut for options.formControl which is assigned to your field's NgModelController (which is why you have access to $valid.

At the end of the day, your field config will look something like this:

vm.rentalFields = [
  {
    key: 'first_name',
    type: 'input',
    templateOptions: {
      type: 'text',
      label: 'First Name',
      placeholder: 'Enter your first name',
      required: true,
      addonRight: {
        class: 'glyphicon glyphicon-ok form-control-feedback' // <-- initialized to a valid state
      }
    },
    expressionProperties: {
      'templateOptions.addonRight.class': '"glyphicon form-control-feedback glyphicon-" + (fc.$valid ? "ok" : "remove")'
    }
  }
];