AngularJS文本输入验证与计数器

Question

我正在开发一个应用程序，其中包含一个带有ng-model="description" 文本输入的表单。 现在我想使用ng-maxlength="50" 和required 验证这个文本输入。这很好用，但我还想添加一个始终显示的字符计数器（如67/50）。我正在使用以下代码来显示计数器：{{description.length || 0}}/50

然而，这个问题是description.length 在大于 50 时不返回值，因为description 输入无效。在我的场景中，当没有输入（这很好）以及输入超过最大长度时，计数器默认为0/50。

我还想在输入长度无效时将我的计数器显示为红色，但使用角度验证 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