I have an Angular validation scenario where a field needs to be valid unless it is disabled, in which case it should be ignored.

(I am using ng-messages for demo purposes, it doesn't affect the $errors state of the form / field).

How do we clear max and required errors when the field is disabled?

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

Here is a working example on JS Bin: ,output

I have an Angular validation scenario where a field needs to be valid unless it is disabled, in which case it should be ignored.

(I am using ng-messages for demo purposes, it doesn't affect the $errors state of the form / field).

How do we clear max and required errors when the field is disabled?

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

Here is a working example on JS Bin: http://jsbin.com/supapotoci/1/edit?html,output

• javascript
• angularjs
• validation

3 Answers 3

Solution provided by @pankajparkar is very good.

In case if you don't want any changes in your markup, you can try this.

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

Here your input element would be like below using ng-max & ng-required

Markup

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

JSBIN

ng-required didn't worked for me with variables mostly because when you use

ng-required="{{test}}" the {{test}} is returned as string when ngRequired expects boolean, luckily you can use it the same way ngClass works, if you replace your input with following code it will work

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