如何在angularJS中将输入字段设置为ng-invalid

I would like to check an input field for credit card numbers.

我想查看信用卡号码的输入字段。

The field should remain invalid until it has a minimum length of 13. As the user should be able to fill in space into the field, I remove those spaces within a javascript function. In this function I would like to check the credit card number (without spaces) and set it to ng-invalid as long as the minimum length is lesser than 13 and the maximum length is greater than 16.

该字段应保持无效，直到其最小长度为13.由于用户应该能够在字段中填入空格，我将删除javascript函数中的这些空格。在这个函数中，我想检查信用卡号（没有空格）并将其设置为ng-invalid，只要最小长度小于13且最大长度大于16。

It should be something like this:

它应该是这样的：

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

This would be the part of the XHTML:

这将是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>

How can I achieve this?

我怎样才能做到这一点？

3 个解决方案

#1

You can do that with $setValidity. You need to set a name attribute on the <form> for this to work.

你可以用$ setValidity做到这一点。您需要在

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

Then you can manually set the validity with

然后您可以手动设置有效性

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

Here is a working plnkr: http://plnkr.co/edit/7J326LR194SaoE2TmHuU?p=preview

这是一个有效的plnkr：http：//plnkr.co/edit/7J326LR194SaoE2TmHuU？p =preview

#2

The following code worked for me:

以下代码对我有用：

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

#3

You can use the standard ng-maxlength and ng-minlength attributes on your input field.

您可以在输入字段中使用标准ng-maxlength和ng-minlength属性。

There is a working example in the AngularJS docs.

AngularJS文档中有一个工作示例。

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

#1