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>

看到这个plunker