validation de forme angulaire avec champ désactivé

Question

J'ai un scénario de validation angulaire où un champ doit être valide que si elle est désactivée, auquel cas il doit être ignoré.

(J'utilise ng-messages à des fins de démonstration, cela n'affecte pas l'état $errors du formulaire/champ).

Comment pouvons-nous dégageons max et required erreurs lorsque le champ est désactivé? .

<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 $ valide = {{myForm valide $}.}

Voici un exemple de travail sur JS Bin: http://jsbin.com/supapotoci/1/edit?html,output

Answer 1

Voici votre élément d'entrée serait comme ci-dessous à l'aide ng-max & ng-required

Markup

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

JSBIN

Answer 2

ng-requis n'a pas fonctionné pour moi avec variables principalement parce que lorsque vous utilisez

ng-required="{{test}}" le {{test}} est renvoyé sous forme de chaîne lorsque ngRequired attend booléen, heureusement vous pouvez l'utiliser de la même manière ngClass œuvres, si vous remplacez votre entrée avec le code suivant cela fonctionnera

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

Answer 3

Solu La contribution de @pankajparkar est très bonne.

Dans le cas si vous ne voulez pas de changements dans votre balisage, vous pouvez essayer.

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