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

前端之家收集整理的这篇文章主要介绍了angularjs – 自定义表单验证指令来比较两个字段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是一个有角度的新手,我绊倒一些东西在角度的形式验证指令如何工作。

我知道我可以很容易地添加指令到个别字段,但我试图添加一个验证,将比较两个表单字段(这两个都是模型的元素)。

这里有一个表单框架:

<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>最大。如何访问一个指令中的两个字段?是一个指令是这个工作的正确工具吗?

许多方式皮肤的猫。

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>

猜你在找的Angularjs相关文章