如何为textarea创建一个字符计数器? (角)

时间:2017-02-03 11:24:53

标签: javascript angularjs forms textarea mean-stack

CODE:

    <div class="form-group">
      <label class="control-label" for="content">Content</label>
      <textarea name="content" data-ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="1400 characters long at least" required ng-minlength="1400" ng-maxlength="14000" highlight-on-error></textarea>
        <!--counter-->
      <br>
      <span class="form-help">{{1400-vm.article.content.length}}         
       Characters</span>
      <div ng-messages="vm.form.articleForms.content.$error" role="alert">
        <p class="help-block error-text" ng-message="required">Article title is required.</p>
      </div>
    </div>

状况:

如果ng-messages上的字数过低,我试图在提交时显示错误消息:错误消息没有出现。

我还试图实时更新文本区域的字数。它没有。

我做错了什么?

参考:

angularjs text area character counter

P.S:

我正在使用mean.js

1 个答案:

答案 0 :(得分:0)

工作正常:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<body ng-app> 
    <div class="form-group">
      <label class="control-label" for="content">Content</label>
      <textarea name="content" data-ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="1400 characters long at least" required ng-maxlength="1400" highlight-on-error></textarea>
        <!--counter-->
      <br>
      <span class="form-help">{{1400-vm.article.content.length}}         
       Characters</span>
      <div ng-messages="vm.form.articleForms.content.$error" role="alert">
        <p class="help-block error-text" ng-message="required">Article title is required.</p>
      </div>
    </div>
    
</body>