自定义表单验证指令来比较两个字段

Question

我是一个有角度的新手,我对于角度形式验证指令的工作方式感到磕磕绊绊.

我知道我可以很容易地将指令添加到各个字段,但我正在尝试添加一个验证,它将比较两个表单字段(两者都是模型的元素).

这是一个表单框架:

<form name="edit_form" >
  <input name="min" type="number" ng-model="field.min"/>
  <input name="max" type="number" ng-model="field.max"/>
</form>

<div class="error" ng-show="edit_form.min.$dirty || edit_form.max.$dirty">
  <small class="error" ng-show="(what goes here?)">
    Min cannot exceed max
  </small>
</div>

总之,我想写一个指令,并用它来显示/隐藏这small.error如果min和max都有值,但min > max.如何访问一个指令中的两个字段？指令是否适合这项工作？

Answer 1

你不需要任何指令.只需将max的"min"值指定为min-value即可.喜欢:

<input name="min" type="number" ng-model="field.min"/>
<input name="max" type="number" ng-model="field.max" min=" {{ field.min }}"/>

而且您不需要任何自定义.
更多:你可以做到min=" {{ field.min + 1}}"

Answer 2

许多方法给猫皮肤.

PLUNKER

app.directive('lowerThan', [
  function() {

    var link = function($scope, $element, $attrs, ctrl) {

      var validate = function(viewValue) {
        var comparisonModel = $attrs.lowerThan;

        if(!viewValue || !comparisonModel){
          // It's valid because we have nothing to compare against
          ctrl.$setValidity('lowerThan', true);
        }

        // It's valid if model is lower than the model we're comparing against
        ctrl.$setValidity('lowerThan', parseInt(viewValue, 10) < parseInt(comparisonModel, 10) );
        return viewValue;
      };

      ctrl.$parsers.unshift(validate);
      ctrl.$formatters.push(validate);

      $attrs.$observe('lowerThan', function(comparisonModel){
        // Whenever the comparison model changes we'll re-validate
        return validate(ctrl.$viewValue);
      });

    };

    return {
      require: 'ngModel',
      link: link
    };

  }
]);

用法:

<input name="min" type="number" ng-model="field.min" lower-than="{{field.max}}" />
<span class="error" ng-show="form.min.$error.lowerThan">
  Min cannot exceed max.
</span>

Answer 3

一个简单的比较会适合你吗？

<small class="error" ng-show="field.min > field.max">

如果你的情况就是这样,我认为指令会是一种矫枉过正.如果您对包含应用程序逻辑的视图不满意,可以将其导出到控制器的功能中:

$scope.isMinMaxInalid = function() {
    return $scope.field.min > $scope.field.max;
};

和模板:

<small class="error" ng-show="isMinMaxInalid()">