带有禁用字段的角度表单验证答案

【问题标题】：Angular form validation with disabled field带有禁用字段的角度表单验证
【发布时间】：2015-03-19 12:01:15
【问题描述】：

我有一个 Angular 验证场景，其中一个字段需要有效，除非它被禁用，在这种情况下它应该被忽略。

（我将ng-messages用于演示目的，它不会影响表单/字段的$errors状态）。

当字段被禁用时，我们如何清除 max 和 required 错误？

<form name="myForm">
  <label><input type="checkbox" ng-model="disable"> disable field</label><br>

  <input name="width" type="number" ng-disabled="disable" ng-disabled="disable" ng-model="someValue" max="100" required>

  <div class="errors" ng-messages="myForm.width.$error">
    <div ng-message="required">Please enter a width</div>
    <div ng-message="max">Width is over the max permitted</div>
  </div>
</form>

myForm.$valid = {{ myForm.$valid }}

这是一个关于 JS Bin 的工作示例：http://jsbin.com/supapotoci/1/edit?html,output

【问题讨论】：

标签： javascript angularjs validation

【解决方案1】：

@pankajparkar 提供的解决方案非常好。

如果您不希望对标记进行任何更改，可以试试这个。

directive('ngDisabled', function () {
    return {
        link: function (scope, element, attrs) {
            var ngModelController = element.controller('ngModel');
            if (!ngModelController) {
                return;
            }
            scope.$watch(attrs.ngDisabled, function (nv, ov) {
                if (nv) { //disabled
                    //reset
                    Object.keys(ngModelController.$validators)
                        .forEach(function (type) {
                            ngModelController.$setValidity(type, true);
                        })
                } else {
                    ngModelController.$validate();
                }
            })
        }
    }
});

【讨论】：

使用指令的好方法。 +1，您能否解释一下Object 在您的回答中是什么。 :)
@pankajparkar 感谢您的支持。 Object 是浏览器提供的全局Object。使用上面定义的keys 方法，我们将能够检索定义在javascript 对象上的键。 ngModelController.$validators 将包含验证类型和要执行的功能的映射。
跨浏览器上的Object 是否相同？它会出现在 IE9 和 IE 10 等浏览器上吗？
是的。 IE9+支持。

【解决方案2】：

您的输入元素如下所示，使用ng-max & ng-required

标记

<input name="width" type="number" ng-disabled="disable" 
ng-model="someValue" ng-max="disable ? false: 100" ng-required="!disable">

JSBIN

【讨论】：

太好了，谢谢。我没有意识到ng-max 会接受这样的布尔值。
@Ade 谢谢 :) 实际上它可能不是数字......就像'' / true 也在工作......我不知道它：p
@downvoter 我能知道downvote背后的原因吗？很高兴知道我自己即兴创作的错误在哪里

【解决方案3】：

ng-required 对变量不起作用主要是因为当你使用

ng-required="{{test}}" {{test}} 在ngRequired 期望布尔值时以字符串形式返回，幸运的是，您可以像ngClass 一样使用它，如果您将输入替换为以下代码，它将起作用

<input name="width" type="number" 
  ng-disabled="disable" 
  ng-model="someValue" 
  ng-max="{false: false, true: 100}[!disable]" 
  ng-required="{true : true, false : false}[!disable]" />

【讨论】：