带有计数器的 AngularJS 文本输入验证

Question

我正在开发一个应用程序，其中包含一个带有 ng-model="description" 的文本输入的表单。 .
现在我想使用 ng-maxlength="50" 验证此文本输入和 required .这工作正常，但我还想添加一个始终显示的字符计数器(如 67/50 )。我使用以下代码来显示计数器:{{description.length || 0}}/50
然而，问题在于 description.length大于 50 时不返回值，因为 description输入无效。在我的场景中，计数器默认为 0/50当没有输入时(这很好)而且当输入超过最大长度时。

当输入长度无效时，我还想以红色显示我的计数器，但是使用 Angular 验证 css 类应该不会太难。

当然，我可以提供自定义验证，但我肯定有更简单的解决方案。

Answer 1

像这样使用表单元素 $viewValue 代替:

<form name='form'>

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

见 this plunker