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

【问题标题】：How to get contents of invalid form model in AngularJS?如何在 AngularJS 中获取无效表单模型的内容？
【发布时间】：2016-01-19 10:02:00
【问题描述】：

我有一个 AngularJS 网络应用程序，它有一个包含如下文本区域的表单：

<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 未定义，我无法告诉用户必须为输入删除多少个字符有效。

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

【问题讨论】：

标签： angularjs angular-ngmodel angularjs-ng-model

【解决方案1】：

你可以使用$viewValueNgModelControllerhttps://code.angularjs.org/1.3.10/docs/api/ng/type/ngModel.NgModelController的$viewValue

要访问它，您需要在表单和输入中添加name。

<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>

请参阅下面的示例代码 sn-p 以了解它是如何工作的，其中我还结合了 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>

【讨论】：

点赞！或someForm.lotsaText.$error.maxlength 在ng-if 内，因此您不必检查长度。
另外，如果字符数超过 1000，Angular 会将 ng-invalid 类添加到文本区域。