Dynamically changing the glyphicon of input add on - angularjs

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>