Question

我有一个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

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

Answer 2

此处您的输入元素如下所示ng-max＆amp; ng-required

<强>标记

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

JSBIN

Answer 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]" />它会起作用

{{1}}

使用禁用字段进行角度表单验证

3 个答案: