在AngularJS中,当同一表单中的另一个值发生更改时,如何强制重新验证表单中的字段?

2024-04-06

我有一个包含几个字段的表单,但是选择和输入字段是耦合的:输入的验证取决于用户在选择字段中选择的值。

我将尝试用一个例子来澄清。假设选择包含行星的名称:

<select id="planet" class="form-control" name="planet" ng-model="planet" ng-options="c.val as c.label for c in planets"></select>

在输入中,我通过名为“input-validation”的自定义指令应用自定义验证:

<input id="city" input-validation iv-allow-if="planet==='earth'" class="form-control" name="city" ng-model="city" required>

这是指令:

.directive('inputValidation', [function() {
  return {
    require: 'ngModel',
    restrict: 'A',
    scope: {
      ivAllowIf: '='
    },
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {

        //input is allowed if the attribute is not present or the expression evaluates to true
        var inputAllowed = attrs.ivAllowIf === undefined || scope.$parent.$eval(attrs.ivAllowIf);

        if (inputAllowed) {
          ctrl.$setValidity('iv', true);
          return viewValue;
        } else {
          ctrl.$setValidity('iv', false);
          return undefined;
        }

      });
    }
  };
}]) 

完整的示例可以在 Plnkr 中查看:http://plnkr.co/edit/t2xMPy1ehVFA5KNEDfrf?p=preview http://plnkr.co/edit/t2xMPy1ehVFA5KNEDfrf?p=preview

每当修改选择时,我都需要再次验证输入。这在我的代码中没有发生。我究竟做错了什么?


我做了同样的事情来验证结束日期更改的开始日期。在开始日期的指令中添加监视结束日期的变化,然后调用ngModel.$validate()如果定义了结束日期新值。

    scope.$watch(function () {
        return $parse(attrs.endDate)(scope);
    }, function () {
        ngModel.$validate();
    });

重要的部分是调用ngModel.$validate()指令内。

Note您应该使用 $validators 进行上面的自定义验证才能工作。在这里读 http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html, $parsers 是旧方法 - 从 angularjs 1.3 使用 $validators

固定插头链接 http://plnkr.co/edit/tst9NkWzjnwIl9Sz0XWO?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在AngularJS中,当同一表单中的另一个值发生更改时,如何强制重新验证表单中的字段? 的相关文章

随机推荐