Question

我在浏览器中看到了这个：

<input class="ng-valid-number ng-dirty ng-valid ng-valid-required" type="number" step="0.01" required="" data-ng-model="obfuscated" min="0.1" max="0.5">

这对我来说很奇怪，因为我把42作为一个值填充。

我想使用自定义验证功能。我不关心这一点的指令，我只想按照

的方式做点什么

ng-valid-when="expression"

这样的事情存在吗？

（如果你想知道我是如何失败的，那么线索就是使用一个表达式来填充最大值和最小值max="0.5"按预期工作，max="{{my expression}}"没有。）

更新：工作指令解决方案

使用指令：

module.directive('withinRange', function () {
return  {
  require: 'ngModel',
  link: function (scope, element, attrs, ngModel) {
    var restrictions = scope.$eval(attrs.withinRange);
    scope.$watch(function(){return ngModel.$modelValue}, function(){
      ngModel.$setValidity('min', ngModel.$modelValue >= restrictions.min());
      ngModel.$setValidity('max', ngModel.$modelValue <= restrictions.max());
    });
  }
}
});

这有效：

<input name="input" type="number" step="0.01"
       data-within-range="range" 
       data-ng-model="value"/>

    angular.extend($scope, {value: 0.2,
      range: {
        min: function () {
          return 0.1;
        }, max: function () {
          return 0.9;
        }}});

Answer 1

Angular表单验证期望表单或输入错误具有名称。此名称在传递给$setValidity的参数中指定，您可以在指令定义中使用ngModelController实例并在其链接函数中使用该参数。

此类ng-valid-when="expression"属性不会传递错误名称。

因此，您必须为您的错误类型构建一个指令。 Angular就是这样设计的。

但是，您可以编写自己的通用ngValidExpression指令，例如，可以像对ng-invalid-expression属性一样切换ng-valid-expression / ngPattern类。

Answer 2

这在Angular中不存在。您可以获得的最接近的是输入指令的ng-pattern属性。

有关使用指令进行表单验证的更多信息，请参阅manual page for forms。

Answer 3

我为多个验证（每个输入一个）提供了一个解决方案，没有写多个验证器指令，只需将验证器放在范围内，并将那些验证器称为属性

控制器：

//...
myRangeValidator = (modelValue, viewValue)=>{...}
$scope.actions.validators.range = myRangeValidator;
$scope.data.number = 0;

myUserNameValidator = (modelValue, viewValue)=>{...}
$scope.actions.validators.userName = myUserNameValidator;
$scope.data.userName = "";
//...

查看：

<input
  type="number"
  ng-model="data.number"
  dfxpvalidator="actions.validators.range"
>
<input
  type="text"
  ng-model="data.userName"
  dfxpvalidator="actions.validators.userName"
>

指令：

// This directive add a custom validator independent of the directive
// original writed in CS
app.directive( 'dfxpvalidator', [
  '$rootScope',
  '$timeout',
  function($rs, $to){
    return {
      restrict: 'A',
      require: 'ngModel',
      scope:{dfxpvalidator: '='},
      link: function(scope, elements, attrs, model){
        model.$validators.myValidator = scope.dfxpvalidator
      }
    }
  }
])

我是否可以在AngularJS中使用没有指令的自定义验证函数

更新：工作指令解决方案

3 个答案:

控制器：

查看：

指令：