使用禁用字段進行角度表單驗證

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 ＆ 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}}"當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]" />