AngularJS ngRequired指令和$狀態

我試圖用AngularJS信用卡驗證碼弗羅姆無效https://github.com/bendrucker/angular-credit-cards

當我加入了一個示例代碼

<input type="text" ng-model="card.number" name="cardNumber" cc-number cc-eager-type /> 
<p ng-show="ccForm.cardNumber.$invalid && ccForm.cardNumber.$ccEagerType"> 
Looks like you're typing a {{paymentForm.cardNumber.$ccEagerType}} number! 
</p> 
<div ng-show="(ccForm.cardNumber.$invalid && ccForm.cardNumber.$viewValue != null)">Card number is invalid</div>

到演示代碼在這裏http://embed.plnkr.co/uE47aZ/preview

我可以在字段中輸入字母而不會引發錯誤信息。

問題是我怎麼能顯示無效的CC數的消息是必需的領域時，但是當CC數輾轉地位ccForm.cardNumber.$invalid將是防止仍然true

UPDATE： 我提出的代碼有一個按摩對於這兩種情況

<div ng-show="(ccForm.cardNumber.$invalid && ccForm.cardNumber.$ccEagerType) || (ccForm.cardNumber.$invalid && ccForm.cardNumber.$viewValue != '')">Card number is invalid</div>

它的工作原理是當某個點被觸摸但沒有輸入任何內容。在那種情況下，我顯示消息 - 必需和無效。

來源

2017-08-31 JackTheKnife

它是在結合使用cc-number，cc-cvc或cc-exp和相關問題與https://github.com/bendrucker/angular-credit-cards代碼時，現場是$touched，但什麼也沒有在該字段中鍵入了ngRequired指令的情況下暫時的解決辦法。這種情況下的接受標準是僅顯示必需消息但不顯示無效消息（尚未提供任何值）。

爲了解決這個問題，無需編輯我的代碼，就是爲上述字段設置初始值。實施例下面：

ng-init="card.number=''"

然後用下面的組合，以使用它來顯示適當的消息

<span ng-show="(form.input.$error.required || form.input.$error.parse) && form.input.$viewValue == ''">Required entry</span> 
<span ng-show="form.input.$invalid && form.input.$viewValue != ''">Entry is invalid</span>

我認爲這將是最好有它一個文件中的某個地方提到，直到其將被永久固定代碼。

來源

2017-09-01 14:26:26 JackTheKnife

AngularJS ngRequired指令和$狀態

回答

相關問題