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")'
    }
  }
];

Answer 2

You need to add ng-class on the container that stores the glyphicon, and then conditional check a variable that stores the validity of the input. For example this is the approach using forms:

    <form class="form-inline" name="myForm">
       <input type="text" class="form-control" name="firstName" ng-model="firstName" ng-maxlength="5" /> 
       <span class="glyphicon" ng-class="{'glyphicon-ok': myForm.firstName.$valid, 'glyphicon-remove': myForm.firstName.$invalid}"></span> 
    </form>

Where myForm.firstName.$invalid is the condition on which you set glyphicon. (Which is set by the ng-maxlength directive on the input, see this: https://docs.angularjs.org/api/ng/directive/input).

Alternatively you can use a separated variable to store the validity of the input based on some rules you figure out in your controller.

See this fiddle: http://jsfiddle.net/HB7LU/14198/

Answer 3

This will work:

<span class="glyphicon green" ng-class="{'glyphicon-ok': {{single_request.status}}==1, 'glyphicon-remove': {{single_request.status}}==0 }" ></span>