如何在angularJS中将输入字段设置为ng-invalid [英] How to set an input field to ng-invalid in angularJS

查看:87
本文介绍了如何在angularJS中将输入字段设置为ng-invalid的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

该字段应保持无效,直到其最小长度为13.因为用户应该是能够在场中填充空间,我删除了javascript函数中的那些空格。
在此功能中,我想检查信用卡号码(不含空格),并将其设置为ng-invalid,只要最小长度小于13且最大长度大于16。

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.

它应该是这样的:

$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的一部分:

This would be the part of the 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>

我如何实现这一目标?

推荐答案

以下代码适用于我:

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

这篇关于如何在angularJS中将输入字段设置为ng-invalid的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆