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

Question

我想检查一个信用卡号码的输入框。

该字段应该在长度达到最小值13之前始终无效。由于用户可以将空格填入该字段，因此我在JavaScript函数中删除这些空格。在此函数中，我想检查信用卡号码（无空格）并设置为ng-invalid，只要最小长度小于13且最大长度大于16。

它应该像这样：

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

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

我该如何实现这个目标？

- Pille

---

请使用 ng-disabled 代替 document.getElementById("ccProvider").disabled。 - Pieter Herroelen

你可能想要查看Angular UI的mask指令：http://angular-ui.github.io/ui-utils/#/mask - Pieter Herroelen

Answer 1

您可以使用$setValidity来实现这一点。为使其生效，您需要在<form>上设置name属性。

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

这里是一个可工作的plnkr：http://plnkr.co/edit/7J326LR194SaoE2TmHuU?p=preview

- Pieter Herroelen

---

谢谢您。以某种方式设置有效性，但它被忽略了。我不知道为什么。输入字段位于 div 中，而此 div 位于表单中。这应该没问题，对吧？ - Pille

Answer 2

以下代码对我有效：

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

- Pille

---

这并没有提供答案。如果您要对作者进行批评或请求澄清，请在他们的帖子下方留言 - 您始终可以评论自己的帖子，并且一旦您拥有足够的声望，您将能够评论任何帖子。 - Steve

这是对我的帖子的回答，它达到了我所寻求的内容。 - Pille

您说得对，我没有正确地使用 $setValidity。我已经修改了我的回答。 - Pieter Herroelen

Answer 3

你可以在输入字段上使用标准的ng-maxlength和ng-minlength属性。 AngularJS文档中有一个可行的示例。

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

- Pieter Herroelen

---

谢谢，但我不能使用那个输入字段中已删除空格的内容（如我上面提到的）。我需要在JS函数中跟踪长度。我编辑了我的问题以使其更清晰。 - Pille

为什么不能去掉空格，让标准指令在最后设置有效性呢？ - Pieter Herroelen

空格已被移除，但 ng-minlength 和 ng-maxlength 仍然观察到字段中的实际输入，而不是没有空格的数据。因此问题在于，在检查最小和最大长度时，这些空格被计算在内。 - Pille