验证AngularJS中的不可见和禁用字段

Question

有没有办法在AngularJS中进行条件验证？我试图解决的问题基本上是一个单选按钮列表，根据选择启用/禁用输入。以下图像描述了该问题。第一个文本输入只接受字母，第二个只接受数字。两者都设置了ng-pattern和ng-required。 (The working example on Plunker)

我想要实现的是，当选择单选按钮时，验证将关闭相应的输入字段。

我原本希望将ng-disabled设置为true可以防止为有问题的表单控件设置无效状态，但唉，情况并非如此。

到目前为止，我找到的唯一解决方案是在选择其他选项并将ng-required设置为false时清除输入。是否有任何合理的方法来实现这一点，或者是完全从DOM中取出元素的唯一解决方案？

Answer 1

尝试此指令：

.directive('disableChildren', function() {
  return {
    require: '^form',
    restrict: 'A',
    link: function(scope, element, attrs,form) {
      var control;

      scope.$watch(function() {
        return scope.$eval(attrs.disableChildren);
      }, function(value) {
        if (!control) {
          control = form[element.find("input").attr("name")];
        }
        if (value === false) {
          form.$addControl(control);
          angular.forEach(control.$error, function(validity, validationToken) {
            form.$setValidity(validationToken, !validity, control);
          });
        } else {
          form.$removeControl(control);
        }
      });
    }
  }
})

DEMO

有关其工作原理的更多信息和说明。查看我的类似指令，从验证中排除隐藏元素：

implementing a directive to exclude a hidden input element from validation ($addControl issue)

我认为我们可以以某种方式组合这些指令来创建一个可以在任何地方使用的通用指令，具体取决于我们如何评估表达式。

Answer 2

正如marmite所说，ng-required可以接受表达式，所以你可以说类似

<input name="numeric" ng-required="alpha.disabled == false" />
<input name="alpha" ng-required="numeric.disabled == false" />

我不确定如何检查禁用状态 - 应该这样做，但我只是通过检查复选框的状态来创建此效果。

我意识到这是一个拉撒路的帖子，但希望它能帮助别人。

Answer 3

我认为你正在使用ng-required。对于两个文本输入，您已将其硬编码为true，但如果勾选了单选按钮，则实际上只需将这些输入上的ng-required设置为true。