Question

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

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

这个问题是它只显示＆＃34; 10＆＃34;并且它没有更新，它只是在输入10个字符后消失。我的猜测是我的长度出了问题，但我不确定。

旁注：无论如何，只要在内部点击textarea，我就可以显示字符数，而不是仅仅在用户开始输入时？

Answer 1

信息

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

使用$viewValue.length 代替 contactData.sender_message.length ^[1]
当用户点击textarea时，使用ng-click="contactForm.message.$touched = true"将$touched值设置为true。*
使用与has-error类的div相同的div上的form-group类。

实施例

＆＃13;

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

＆＃13;

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

＆＃13;

*注意：这可能违反AngularJS中的常规做法;可能不推荐。您应该考虑制作自定义验证器。有关详细信息，请参阅AngularJS form validation。

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

Answer 2

尝试使用
{{1}}

AngularJS textarea计数器

2 个答案: