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

Posted 2023-02-22

【中文标题】如何在angularJS中将输入字段设置为ng-invalid

【英文标题】：How to set an input field to ng-invalid in angularJS

【发布时间】：2014-05-23 20:11:48

【问题描述】：

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

该字段在最小长度为 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>

我怎样才能做到这一点？

【问题讨论】：

请使用ng-disabled 而不是document.getElementById("ccProvider").disabled

你可能想查看 angular ui 的 mask 指令：angular-ui.github.io/ui-utils/#/mask

【参考方案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>

然后你可以手动设置有效期

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

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

【讨论】：

谢谢你。以某种方式设置有效性以某种方式被忽略。我不知道为什么。输入字段在一个 div 内，而这个 div 在表单内。应该没问题吧？

【参考方案2】：

以下代码对我有用：

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

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。

这是我帖子的答案，因为它实现了我搜索的内容。

你说得对，我没有正确使用 $setValidity。我修改了答案。

【参考方案3】：

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

AngularJS docs 中有一个工作示例。

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

【讨论】：

谢谢，但我不能使用该输入字段中的空格（如上所述）。我需要跟踪 JS 函数中的长度。我编辑了我的问题以使其更清楚。

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

空格被删除，但是 ng-minlength 和 ng-maxlength 正在观察字段中的实际输入，而不是在没有空格的情况下更改数据。所以问题是在检查最小和最大长度时会考虑这些空格。