AngularJS Texteingabe Validierung mit Zähler

Question

Ich entwickle eine App mit einem Formular, das eine Texteingabe mit ng-model="description" hat. Jetzt möchte ich diese Texteingabe mit ng-maxlength="50" und required validieren. Das funktioniert gut, aber ich möchte auch jederzeit einen Zeichenzähler (wie 67/50) hinzufügen. Ich verwende den folgenden Code, um den Zähler anzuzeigen: {{description.length || 0}}/50

Das Problem dabei ist jedoch, dass description.length keinen Wert zurückgibt, wenn es mehr als 50, weil description Eingabe ungültig ist. In meinem Szenario würde der Zähler standardmäßig 0/50 sein, wenn es keine Eingabe gibt (und das ist in Ordnung), aber auch wenn die Eingabe die maximale Länge überschreitet.

Ich möchte auch meinen Zähler in rot anzeigen, wenn die Eingabelänge ungültig ist, aber das sollte nicht zu hart mit angularen Validierung CSS-Klassen sein.

Natürlich könnte ich benutzerdefinierte Validierung bieten, aber ich bin sicher, es gibt eine einfachere Lösung.

Answer 1

das Formularelement Verwenden Sie stattdessen $ viewValue wie folgt aus:

<form name='form'> 

    <input type="text" name='description' ng-model='description' ng-maxlength="50"> 
    {{form.description.$viewValue.length || 0}}/50 
</form> 

this plunker