在AngularJS中,如何创建一个自定义验证指令,该指令采用$ scope变量并将其与ng-model比较是否相等?

拉尔夫N

我正在寻找一个新的angular指令,其目的是将输入的ngmodel值与其他某个值进行比较,并检查它们是否相等。

如果它们相等,则我希望此输入有效。否则无效。

<div ng-repeat="one in many">
    <ng-form name="somethingToValidate">
        <input type="text" ng-model="one.userTypedText" 
               required mustbeequalto="one.someOtherValue" />
    </ng-form>
</div>

这是完成时使用的“ mustbeequalto”指令的示例。
1)请注意{{one.someOtherValue}}可以随时更改,因此此指令必须知道此值的2路绑定性质。
2)我将在ng-repeat中使用它,因此它应该足够聪明以仅在包含它的特定ng-form的范围内工作。

我认为我需要验证指令,但是如果您认为有更好/更优雅的方法,请提出建议。我尝试创建此指令,但失败了。

tasseKATT

编写一个返回值的函数ng-model

require: 'ngModel',
link: function(scope, element, attributes, ngModelController) {

  var getModelValue = function() {
  return ngModelController.$viewValue;
};

如上所示,您可以通过检索此内容ngModelController.$viewValuengModelController可作为通过要求它在链接功能的第四个参数。


编写一个函数,该函数返回传递给must-be-equal-to属性的值:

var getMustBeEqualToValue = function() {
  return scope.$eval(attributes.mustBeEqualTo);
};

您可以使用该$eval方法在当前作用域上执行表达式以获取正确的值。


编写一个设置有效性的函数:

var setValidity = function (isValid) {
  ngModelController.$setValidity('mustBeEqualTo', isValid);
};


用于每次$watch执行更改setValidity的值ng-model

scope.$watch(getModelValue, function(newValue, oldValue) {
  if (newValue === oldValue) return;
  setValidity(newValue === getMustBeEqualToValue());
});


使用$watch要执行setValidity什么被传递到每次的价值must-be-equal-to属性的变化:

scope.$watch(getMustBeEqualToValue, function(newValue, oldValue) {
  if (newValue === oldValue) return;
  setValidity(getModelValue() === newValue);
});


演示: http //plnkr.co/edit/w9t0uk6l0HL0QYi40Cth?p = preview

有优化的余地,但是该示例有望成为一个良好的开端。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章