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

Question

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



What I would like to achieve is that when the radio button is selected, the validation turns off for the corresponding input field.

我曾希望设置ng-disabled设置为 true 将防止为相关表单控件设置无效状态，但遗憾的是，情况并非如此。

到目前为止，我找到的唯一解决方案是在选择另一个选项并设置 ng-required 时清除输入。为假。是否有任何明智的方法可以实现这一点，或者是将元素完全从 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)

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