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

Question

有没有办法在AngularJS中进行条件验证？我试图解决的问题基本上是一组单选按钮，根据选择启用/禁用输入。下面的图像描述了问题。第一个文本输入只接受字母，第二个接受数字。两者都设置了ng-pattern和ng-required。(在 Plunker 上的工作示例) 我想要实现的是，当选择单选按钮时，相应的输入字段的验证将关闭。

我曾希望将ng-disabled设置为true可以防止对相关表单控件设置无效状态，但不幸的是，事实并非如此。

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

- RJo

---

在实际的表单验证中，AngularJS 没有提供一流支持是一个很大的疏忽。 - Jacob Stamm

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);
        }
      });
    }
  }
})

演示

想要了解更多信息和如何工作的解释，请查看我为排除隐藏元素验证而编写的类似指令：

实现一个指令来排除隐藏的输入元素验证（$ addControl问题）

我认为我们可以将这些指令结合起来，创建一个通用的指令，根据我们如何评估表达式使用。

- Khanh TO

---

是的，$addControl 和 $removeControl 可能可以解决问题。我会尝试草拟一个 plunk，以便禁用所有子元素的验证。这里的问题是，在 disable-children 和要禁用的输入之间可能有一个 ng-form，而且不能选择 select 元素。 - RJo

@RJo：是的，这只是一个针对你情况的演示，旨在介绍$addControl和$removeControl的概念。你可以进行扩展。祝编码愉快。 - Khanh TO

@KhanhTO 伙计，你能帮我一下吗？在这里：https://dev59.com/j-k6XIcBkEYKwwoYFf_R - Hassan Faghihi

Answer 2

正如Marmite所建议的，ng-required可以接受一个表达式，因此您可以这样说

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

我不确定如何检查禁用状态 - 那应该可以解决问题，但我只是通过检查复选框的状态来创建这种效果。

我意识到这是一篇Lazarus文章，但希望它能帮助其他人。

- DisasterMan

---

“ng-required” 不是字段的唯一验证方式，还应该禁用模式。我想要的是在未选择字段时关闭所有验证，而不仅仅是必需验证。 - RJo

哦，那复杂了。 我所做的是使用 ng-if 从 DOM 中删除当前不需要验证的字段，但正如所说，这需要一个复选框，这确实使表单复杂了。 这可能不是您预期的用户体验理想方案，但它可以正常工作。 - DisasterMan

Answer 3

我认为你在错误地使用ng-required。你已经将它硬编码为两个文本输入框的true，但实际上只有在选中单选按钮时，这些输入框上的ng-required才应该设置为true。

- marmite