形式 – 在AngularJS中验证隐形和残疾字段

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

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

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

目前我发现的唯一解决方案是在选择其他选项并将ng-required设置为false时清除输入.是否有任何明智的方式来实现这一点,或者是将DOM中的元素完全从DOM中解脱出来的唯一方法？

尝试此指令：

.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)

我想我们可以以某种方式组合这些指令来创建一个可以随处使用的一般指令,这取决于我们如何评估表达式.

形式 – 在AngularJS中验证隐形和残疾字段

相关文章