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

Question

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

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

我曾希望ng-disabled将true 设置为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

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

实现一个指令以从验证中排除隐藏的输入元素($ addControl issue)

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