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

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

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

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

(我使用ng-messages进行演示,它不会影响表单/字段的$ errors状态)。

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

myForm。$ valid = {{myForm。$ valid}}

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

以下是JS Bin的一个工作示例:http://jsbin.com/supapotoci/1/edit?html,output

3 个解决方案

#1

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

使用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

#2

Solution provided by @pankajparkar is very good.

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

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

#3

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

ng-required对我来说并不适用于变量,主要是因为你使用时

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

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

#1