动态更改输入附加的字形

Question

如何在验证输入类型时更改 **glyphicon"（输入字段的右侧（见下文））？

例如。当输入有效时，将其更改为glyphicon-ok（打勾）或无效时将其更改为glyphicon-移除（叉号）

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

你需要在存储glyphicon的容器上添加ng-class，然后条件检查一个存储输入有效性的变量。例如，这是使用表单的方法：

    <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>

其中 myForm.firstName.$invalid 是设置 glyphicon 的条件。（由输入上的 ng-maxlength 指令设置，参见：https://docs.angularjs.org/api/ng/directive/input）。

或者，您可以根据您在控制器中确定的一些规则，使用单独的变量来存储输入的有效性。

看到这个fiddle：http://jsfiddle.net/HB7LU/14198/

Answer 2

使用 angular-formly，如果你想要任何东西是动态的，你可以使用 expressionProperties。因为您希望 addonRight 的 class 属性是动态的，所以您的 expressionProperties 属性将是：

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

expressionProperties 的值称为 formly expressions 这基本上意味着它们可以是在 formly-field 的 $scope 上计算的字符串或传递的函数($viewValue, $modelValue, scope) 并且可以 return 值或解析为值的承诺。

您在该表达式中看到的 fc 是分配给您字段的 NgModelController 的 options.formControl 的快捷方式（这就是为什么您可以访问 $valid。

一天结束时，您的字段配置将如下所示：

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 3

这会起作用：

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

动态更改输入附加的字形

Dynamically changing the glyphicon of input add on

angularjs

angular-formly