AngularJS文本输入验证和计数器

Question

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

然而，问题在于当长度超过50时，description.length 不会返回值，因为 description 输入无效。在我的情况下，当没有输入时（没问题），计数器将默认为 0/50，但是当输入超过最大长度时也是如此。

我还想在输入长度无效时以红色显示计数器，但使用 Angular 验证 CSS 类也不难。

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

- dduupp

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。

- Maurice