如何在angularJS中將輸入字段設置爲ng-invalid

我想檢查信用卡號碼的輸入字段。如何在angularJS中將輸入字段設置爲ng-invalid

該字段應該保持無效，直到它的最小長度爲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>

我怎樣才能做到這一點？

來源

2014-04-10 Pille

請使用'NG -disabled'而不是'document.getElementById（「ccProvider」）。disabled' –

你可能想要che ck取出角度ui的掩碼指令：http://angular-ui.github.io/ui-utils/#/mask –

下面的代碼爲我工作：

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

來源

2014-04-10 11:05:14 Pille

這並沒有提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 – Steve

這是我的文章的答案，因爲它實現了我搜索的內容。 – Pille

你說得對，我沒有正確使用$ setValidity。我修改了我的答案。 –

您可以在輸入字段中使用標準ng-maxlength和ng-minlength屬性。

AngularJS docs中有一個工作示例。

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

來源

2014-04-10 08:44:43

謝謝，但我無法使用，因爲在輸入字段中刪除了空格（如上所述）。我需要跟蹤JS函數中的長度。我編輯了我的問題，使其更加清晰。 – Pille

爲什麼不能刪除空格並讓標準指令最終設置有效性？ –

刪除了空格，但是通過ng-minlength和ng-maxlength觀察字段中的實際輸入，而不是無空格更改的數據。所以問題是在檢查最小和最大長度時要考慮這些空間。 – 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

來源

2014-04-10 09:50:23

謝謝你。不知怎的，以這種方式設置有效性它被忽略了。我不知道爲什麼。輸入字段在div內，並且此div位於表單內。這應該沒問題，不是嗎？ – Pille

正如我所見，你已經更新了與我自己的答案相對應的問題... – Pille

如何在angularJS中將輸入字段設置爲ng-invalid

回答

相關問題