Javascript 禁用字段的角度形式验证

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

（我使用

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的工作示例：

ng required对我来说不适用于变量，主要是因为当您使用

ng required=“{{test}}”

当

ngRequired

需要布尔值时，

{test}}

将作为字符串返回，幸运的是，您可以用与

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]" />

---

此处，您的输入元素如下所示，使用

ng max

和

ng required

标记

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

---

由@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();
                }
            })
        }
    }
});

---

太好了，谢谢。我没有意识到

ng max

会接受这样一个布尔值。@Ade谢谢：）实际上它可能不是数字。比如

'

/

true

也在工作。我没有意识到它：p@downvoter我能知道投票失败的原因吗？如果知道我使用指令即兴使用自己的方法的错误所在，那就好了+1、你能解释一下你的回答中的

对象是什么吗@pankajparkar感谢您的投票<代码>对象

是浏览器提供的全局对象。使用上面定义的

keys

方法，我们将能够检索javascript对象上定义的键

ngModelController.$validators

将包含验证类型和要执行的功能的映射。这是否与跨浏览器上的

对象

相同？它会出现在IE9和IE10这样的浏览器上吗？是的。IE9+支持它。