我有一个 AngularJS Web 应用程序，它有一个包含文本区域的表单，如下所示:
<textarea required ng-maxlength="1000" ng-model="foo"></textarea>
验证逻辑只是说用户必须输入最多 1000 个字符的值。进一步假设我决定希望应用程序向用户显示在达到限制之前还剩下多少个字符。没问题:我只是这样写:
<div ng-if="foo.length <= 1000">
{{ 1000 - foo.length }} characters remaining
</div>
以上效果完美。现在，假设我想显示一条消息，指示用户输入了太多字符，因此我编写以下内容:
<div ng-if="foo.length > 1000">
{{ foo.length - 1000 }} characters too many
</div>
上面的代码不起作用，看来情况就是这样，因为 Angular 不接受输入值，因此 foo 未定义，并且我无法告诉用户必须为输入删除多少个字符才有效。
因此，我想知道是否有一种方法可以获取无效输入的值，并告诉用户一个有意义的原因，即它无效。
最佳答案
您可以使用NgModelController的$viewValuehttps://code.angularjs.org/1.3.10/docs/api/ng/type/ngModel.NgModelController
要访问它，您需要向表单和输入添加一个名称。
<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>
请参阅下面的示例代码片段，了解它是如何工作的，我还纳入了 kappaismyname 的建议
(function(){
"use strict";
var app = angular.module('fooApp', []);
app.controller('MainCtrl', function($scope) {
$scope.model = {foo:"Default text here"};
});
})();textarea.ng-invalid {
border: 2px solid red;
}
.validation-message {
color: red;
}<!DOCTYPE html>
<html ng-app="fooApp">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.3.17/angular.js" ></script>
</head>
<body ng-controller="MainCtrl">
<p>model.foo: {{model.foo | json}}</p>
<form name="someForm">
Enter text, but not too much:<br>
<textarea required ng-maxlength="25" ng-model="model.foo" name="lotsaText"></textarea>
<div ng-if="someForm.lotsaText.$error.maxlength" class="validation-message">
{{ someForm.lotsaText.$viewValue.length - 25 }} characters too many
</div>
<div ng-if="someForm.lotsaText.$error.required" class="validation-message">
A non-empty value is required
</div>
</form>
</body>
</html>关于angularjs - 如何在AngularJS中获取无效表单模型的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33241826/