AngularJS 带计数器的文本输入验证
AngularJS text input validation with counter
我正在开发一个应用程序，其中包含一个表单，该表单具有 ng-model="description" 的文本输入。
现在我想使用 ng-maxlength="50" 和 required 验证此文本输入。这工作正常，但我还想添加一个始终显示的字符计数器（如 67/50）。我正在使用以下代码显示计数器：{{description.length || 0}}/50
然而，这个问题是 description.length 不是 return 大于 50 的值，因为 description 输入无效。在我的场景中，当没有输入（这很好）但当输入超过最大长度时，计数器将默认为 0/50。
我还想在输入长度无效时以红色显示我的计数器，但是使用 angular 验证应该不会太难 css 类.
当然我可以提供自定义验证，但我肯定有更简单的解决方案。
像这样使用表单元素 $viewValue：
<form name='form'>
<input type="text" name='description' ng-model='description' ng-maxlength="50">
{{form.description.$viewValue.length || 0}}/50
</form>
我正在开发一个应用程序，其中包含一个表单，该表单具有 ng-model="description" 的文本输入。
现在我想使用 ng-maxlength="50" 和 required 验证此文本输入。这工作正常，但我还想添加一个始终显示的字符计数器（如 67/50）。我正在使用以下代码显示计数器：{{description.length || 0}}/50
然而，这个问题是 description.length 不是 return 大于 50 的值，因为 description 输入无效。在我的场景中，当没有输入（这很好）但当输入超过最大长度时，计数器将默认为 0/50。
我还想在输入长度无效时以红色显示我的计数器，但是使用 angular 验证应该不会太难 css 类.
当然我可以提供自定义验证，但我肯定有更简单的解决方案。
像这样使用表单元素 $viewValue：
<form name='form'>
<input type="text" name='description' ng-model='description' ng-maxlength="50">
{{form.description.$viewValue.length || 0}}/50
</form>