AngularJS 文本区域计数器

AngularJS textarea counter

本文关键字：计数器 区域 文本 AngularJS      更新时间：2023-09-26

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

<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 个字符后消失。我的猜测是我的长度有问题，但我不确定。

旁注：无论如何，我是否可以在单击文本区域后立即显示字符计数，而不仅仅是在用户开始键入时？

信息

你真的很接近你需要的东西，但我做了一些改变。

  • 使用$viewValue.length代替contactData.sender_message.length [1]
  • 使用 ng-click="contactForm.message.$touched = true" 在用户单击文本区域时将$touched值设置为 true。
  • 将 has-error 类与具有 form-group 类的div 放在同一div 上。

例

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 表单验证。

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

尝试使用
{{10 - contactForm.message.$viewValue.length}}

相关文章：