Come impostare un campo di input per ng-invalid in angularJS

Question

Vorrei verificare un campo di input per i numeri delle carte di credito.

Il campo deve rimanere invalido finché non ha una lunghezza minima di 13. Poiché l'utente deve essere in grado di riempire lo spazio nel campo, rimuovo quegli spazi all'interno di una funzione javascript. In questa funzione vorrei controllare il numero della carta di credito (senza spazi) e impostarlo su ng-invalid fintanto che la lunghezza minima è minore di 13 e la lunghezza massima è maggiore di 16.

Dovrebbe essere qualcosa di simile:

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

questa sarebbe la parte del 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> 

Come posso raggiungere questo obiettivo?

Answer 1

Il seguente codice ha funzionato per me:

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

Answer 2

È possibile utilizzare gli attributi standard ng-maxlength e ng-minlength nel campo di input.

C'è un esempio di lavoro nello AngularJS docs.

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

Answer 3

È possibile farlo con $setValidity. È necessario impostare un attributo name su <form> affinché funzioni.

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

Quindi è possibile impostare manualmente la validità con

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

Ecco un plnkr di lavoro: http://plnkr.co/edit/7J326LR194SaoE2TmHuU?p=preview