动态更改输入的glyphicon添加

Question

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

例如。当输入有效时，将其更改为 glyphicon-ok （刻度线）或无效时将其更改为 glyphicon-remove （十字标记） ）

ffmpeg -i <stream path> -timestamp now output.mp4

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

您需要在存储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）。

或者，您可以使用分离的变量根据您在控制器中找到的某些规则来存储输入的有效性。

看到这个小提琴：http://jsfiddle.net/HB7LU/14198/

Answer 3

这将有效：

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