AngularJS ngRequired Richtlinie und Zustand von $ ungültig

Question

Ich versuche AngularJS Kreditkartenvalidierungscode frome https://github.com/bendrucker/angular-credit-cards

Wenn ich ein Beispiel hinzugefügt Code

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

zum Demo-Code haben zu verwenden hier http://embed.plnkr.co/uE47aZ/preview

Ich konnte Buchstaben in das cc-Feld eingeben, ohne Fehlermeldung zu werfen.

Frage ist, wie ich Ungültige CC-Nummer Nachricht anzeigen kann, wenn das Feld erforderlich ist, aber verhindern, wenn CC-Nummer Status für ccForm.cardNumber.$invalid entfernt wurde, wird noch true sein

UPDATE: I-Code eine Massage zu haben, bewegt haben für beide Fälle

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

es bis zu einem gewissen Punkt funktioniert, wenn die eingereichten berührt wurde, aber nichts wurde dort eingegeben. In diesem Fall zeige ich beide Nachrichten an - erforderlich und ungültig.

Answer 1

Es ist eine vorübergehende Lösung für ngRequired Richtlinie Fall in einer Kombination mit cc-number, cc-cvc oder cc-exp und Fragen im Zusammenhang mit dem https://github.com/bendrucker/angular-credit-cards Code, wenn das Feld $touched war aber nichts wurde in diesem Feld eingegeben hat. Akzeptanzkriterium ist in diesem Fall, dass nur die Nachricht "Erforderlich", aber nicht die Meldung "Ungültig" angezeigt wird (es wurde noch kein Wert angegeben).

Um es gelöst zu haben, ohne editing mine code, ist der Anfangswert für die oben genannten Felder gesetzt. Beispiel unten:

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

dann mit einer Kombination zu verwenden, um es unter dem richtigen Nachricht

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

angezeigt Ich denke, es wird gut sein es in einer Dokumentation erwähnte irgendwo zu haben, bis sie dauerhaft fixiert wird in der Code.