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

Question

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

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

Answer 1

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

要访问它，您需要在表单和输入中添加 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>

请参阅下面的示例代码片段，了解它是如何工作的，我还采纳了 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中无效表单模型的内容？

How to get contents of invalid form model in AngularJS?

angularjs

angular-ngmodel

angularjs-ng-model