web-dev-qa-db-fra.com

Comment définir un champ de saisie sur ng-invalide dans angularJS

Je voudrais vérifier un champ de saisie pour les numéros de carte de crédit.

Le champ doit rester invalide jusqu'à ce qu'il ait une longueur minimale de 13. Comme l'utilisateur doit pouvoir remplir l'espace dans le champ, je supprime ces espaces dans une fonction javascript. Dans cette fonction, je voudrais vérifier le numéro de carte de crédit (sans espaces) et le définir sur ng-invalide tant que la longueur minimale est inférieure à 13 et la longueur maximale est supérieure à 16.

Cela devrait être quelque chose comme ceci:

$scope.ccHandler = function() {
   if ($scope.ccNumber == '') {
      document.getElementById("ccProvider").disabled = false;
   }
   $scope.ccNumber = inputCC.value.split(' ').join(''); //entfernt die Leerzeichen aus der Kreditkartennummer vor der übergabe an den Server
   console.log("das ist meine CC: " + $scope.ccNumber);
   isValidCreditCardNumber($scope.ccNumber);
   getCreditCardProvider($scope.ccNumber);
   document.getElementById("ccProvider").disabled = true;
   if ($scope.ccNumber.length < creditCardNumberMinLength || $scope.ccNumber.length > creditCardNumberMaxLength) {
      //$scope.ccNumber.ng-invalid = true;
      console.log("ccNumber ist noch ungültig!");
      //document.getElementById("inputCC").$setValidity("ccNumber", false);
   }
}

Ce serait la partie du XHTML:

<div class="form-group" ng-switch-when="CreditCard">
   <label class="col-xs-3 col-sm-3 control-label">Kreditkartennummer</label> 
   <div class="col-xs-5 col-sm-5 col-md-5">
      <input name="ccNumber" class="form-control" type="text" id="inputCC" ng-change="ccHandler();updateCount()" ng-model="ccNumber" ng-required="true"/>
   </div>
</div>

Comment puis-je atteindre cet objectif?

javascriptangularjsvalidationinput
16
Pille

Le code suivant a fonctionné pour moi:

$scope.myForm.ccNumber.$setValidity("ccNumber", false);
17
Pille

Vous pouvez le faire avec $setValidity. Vous devez définir un attribut name sur le <form> pour que cela fonctionne.

<form name="myForm">
   <input name="ccNumber" ng-model="ccNumber">
   <span ng-show="myForm.ccNumber.$error.minLength">
      A cc number should be minimum 10 chars
   </span>
</form>

Ensuite, vous pouvez définir manuellement la validité avec

$scope.myForm.ccNumber.$setValidity("minLength",$scope.ccNumber.length>=10);

Voici un plnkr de travail: http://plnkr.co/edit/7J326LR194SaoE2TmHuU?p=preview

32
Pieter Herroelen

Vous pouvez utiliser la norme ng-maxlength et ng-minlength attributs sur votre champ de saisie.

Il y a un exemple de travail dans les AngularJS docs .

 <input type="text" name="lastName" ng-model="user.last" 
     ng-minlength="3" ng-maxlength="10">
4
Pieter Herroelen