Sayıcı

Question

ile AngularJS metin giriş onayı ng-model="description" ile bir metin girişi olan bir form içeren bir uygulama geliştiriyorum. Şimdi bu metin girişini ng-maxlength="50" ve required kullanarak doğrulamak istiyorum. Bu iyi çalışıyor, ama aynı zamanda her zaman gösterilen bir karakter sayacı (67/50 gibi) eklemek istiyorum. ancak, 50'den fazla olduğunda description giriş geçersiz olduğundan description.length bir değer döndürmez yani, bununla {{description.length || 0}}/50

sorunu: Ben sayacı görüntülemek için aşağıdaki kodu kullanıyorum. Benim senaryoda, hiçbir girdi (ve bu iyi) ama aynı zamanda giriş maksimum uzunluğu aştığında, sayaç varsayılan olarak 0/50 olarak ayarlanacaktır.

Ayrıca, giriş uzunluğunun geçersiz olduğu durumlarda sayacımı kırmızı olarak görüntülemek istiyorum, ancak açısal doğrulama css sınıflarını kullanmak çok zor olmamalıdır.

Elbette özel doğrulama sağlayabilirdim, ancak daha kolay bir çözüm var.

Answer 1

böyle yerine form öğesi $ viewValue kullanın:

<form name='form'> 

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

this plunker