javascript - validate - Cómo establecer un campo de entrada para ng-invalid en angularJS

ng-form angularjs

Question

Me gustaría verificar un campo de entrada para los números de tarjeta de crédito.

El campo debe permanecer inválido hasta que tenga una longitud mínima de 13. Como el usuario debería poder completar el espacio en el campo, elimino esos espacios dentro de una función de JavaScript. En esta función, me gustaría verificar el número de tarjeta de crédito (sin espacios) y establecerlo como ng inválido siempre que la longitud mínima sea menor que 13 y la longitud máxima sea mayor que 16.

Debería ser algo como esto:

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

Esta sería 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>

¿Cómo puedo conseguir esto?

Answer 1

El siguiente código funcionó para mí:

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

Answer 2

Puede usar los ng-maxlength estándar ng-maxlength y ng-minlength en su campo de entrada.

Hay un ejemplo de trabajo en los documentos de AngularJS .

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

Answer 3

Puedes hacer eso con $setValidity . Debe establecer un atributo de name en <form> para que esto funcione.

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

Luego puede establecer manualmente la validez con

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

Aquí hay un plnkr de trabajo: http://plnkr.co/edit/7J326LR194SaoE2TmHuU?p=preview