Comment définir un champ de saisie à ng-invalid dans angularJS

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

Le champ doit rester valide jusqu'à ce qu'il ait une longueur minimale de 13 ans. En tant que l'utilisateur doit être en mesure de remplir l'espace dans le champ, j'ai supprimer les espaces à l'intérieur d'une fonction javascript.
Dans cette fonction, je voudrais vérifier le numéro de carte de crédit (sans les espaces) et réglez-ng-valide aussi longtemps que la longueur minimale est inférieure à 13, et la longueur maximale est supérieure à 16.

Il 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 y parvenir?

source d'informationauteur Pille

  1. 31

    Vous pouvez le faire avec $setValidity. Vous devez définir un name attribut sur la <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é des

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

    Ici est un travail plnkr: http://plnkr.co/edit/7J326LR194SaoE2TmHuU?p=preview

  2. 16

    Le code suivant fonctionné pour moi:

    $scope.myForm.ccNumber.$setValidity("ccNumber", false);
  3. 4

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

    Il y a un exemple dans le AngularJS docs.

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