javascript - AngularJS 文本区域计数器

Question

我创建了一个包含文本区域的联系表单，我想显示使表单有效所需的最小字符数:

<div class="field form-group">
        <label for="message" class="form-label">Your Message:</label>
        <textarea id="message" name="message" ng-model="contactData.sender_message"  class="form-control" rows="6" ng-class="{ 'has-error': contactForm.message.$touched && contactForm.message.$invalid }" ng-minlength="10" ng-trim="false" placeholder="Questions? Comments? Concerns?" required></textarea>
        <p ng-show="contactForm.message.$error.minlength">{{10 - contactData.sender_message.length}}</p>
</div>

问题是它只显示“10”并且不会更新，输入 10 个字符后它就会消失。我的猜测是我的长度有问题，但我不确定.

旁注:是否还可以在单​​击文本区域后立即显示字符数，而不是仅在用户开始输入时显示？

Answer 1

Information

您非常接近您所需要的，但我做了一些更改。

• 使用$viewValue.length 而不是 contactData.sender_message.length ^[1]
• 使用ng-click="contactForm.message.$touched = true"设置$touched当用户单击文本区域时，值为 true。*
• 使用has-error与 form-group 的 div 位于同一 div 上的类类。

Example

function TodoCtrl($scope) {
  $scope.contactData = {
    sender_message: ""
  };
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app>
  <form name="contactForm" novalidate>
    <div class="field form-group" ng-class="{ 'has-error': contactForm.message.$touched && contactForm.message.$invalid }">
      <label for="message" class="form-label">Your Message:</label>
      <textarea id="message" name="message" ng-model="contactData.sender_message" class="form-control" rows="6" ng-minlength="10" ng-trim="false" placeholder="Questions? Comments? Concerns?"
      ng-click="contactForm.message.$touched = true" required></textarea>
      <p ng-show="contactForm.message.$touched">Min Length {{(10 - contactForm.message.$viewValue.length) > 0 ? (10 - contactForm.message.$viewValue.length) : "Met" }}</p>
    </div>
  </form>
</div>

<小时/>

*注意:这可能违背 AngularJS 中的常见做法；可能不推荐。您应该考虑制作一个自定义验证器。请参阅AngularJS form validation了解更多详情。

^[1] 感谢 @entre 使用 $viewValue 的想法