如何在AngularJS中获取无效表单模型的内容？

我有一个AngularJS web应用程序，它的表单包含一个textarea，如下所示：

<textarea required ng-maxlength="1000" ng-model="foo"></textarea>

验证逻辑只是说用户必须输入最多1000个字符的值。进一步假设我决定让应用程序向用户显示在达到限制之前还有多少个字符。没问题：我只是写下：

<div ng-if="foo.length <= 1000">
    {{ 1000 - foo.length }} characters remaining
</div>

剩余{1000-foo.length}}个字符

上述方法非常有效。现在，假设我想显示一条消息，指出用户键入的字符太多，因此我编写以下代码：

<div ng-if="foo.length > 1000">
    {{ foo.length - 1000 }} characters too many
</div>

{{foo.length-1000}}字符太多

上面的代码不起作用，看起来是这样的，因为Angular不接受输入值，所以foo没有定义，我无法告诉用户必须删除多少字符才能使输入有效

---

因此，我想知道是否有办法获取无效输入的值，并告诉用户无效的有意义的原因。

您可以使用

NgModelController的
$viewValue

要访问它，您需要在表单和输入中都添加一个
名称

<form name="someForm">
  ...
  <textarea required ng-maxlength="1000" ng-model="foo" name="lotsaText"></textarea>
  ...
  <div ng-if="someForm.lotsaText.$viewValue.length > 1000">
    {{ someForm.lotsaText.$viewValue.length - 1000 }} characters too many
  </div>
</form>

textarea.ng-无效{
边框：2倍纯红；
}
.验证消息{
颜色：红色；
}

model.foo:{{model.foo|json}

输入文本，但不要太多：

{someForm.lotsaText.$viewValue.length-25}}字符太多
需要一个非空值
投票赞成！或者
someForm.lotsaText.$error.maxlength
位于
ng if
的内部，因此您不必检查长度。此外，如果字符数超过1000，angular将向文本区域添加
ng invalid
类。