web-dev-qa-db-ja.com

angularJSで入力フィールドをng-invalidに設定する方法

クレジットカード番号の入力フィールドを確認したいと思います。

フィールドは、最小長が13になるまで無効のままにする必要があります。ユーザーはフィールドにスペースを埋めることができるため、javascript関数内でこれらのスペースを削除します。この機能では、クレジットカード番号（スペースなし）を確認し、最小長が13未満で、最大長が16より大きい限り、ng-invalidに設定します。

次のようになります。

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

どうすればこれを達成できますか？

javascriptangularjsvalidationinput
16
Pille

次のコードは私のために働いた：

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

あなたは$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

32
Pieter Herroelen

入力フィールドで標準のng-maxlengthおよびng-minlength属性を使用できます。

AngularJS docs に実用的な例があります。

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