Angular JS textarea验证与必需&显示错误消息

时间:2016-05-03 10:35:09

标签: javascript jquery html angularjs

我有一个Angular JS代码,如果textarea为空,我想实现验证并关注该字段。

<form ng-submit="addComment()" role="form" name="blogForm" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : blogForm.blogComment.$invalid && replySubmitted }">
          <textarea ng-model="blogComment" name="blogComment" class="form-control" rows="3"  ng-required="true" required></textarea>
    </div>
    <div style="color:#a94442;" ng-show="blogForm.blogComment.$invalid && replySubmitted">
         <span ng-show="blogForm.blogComment.$error.required">Comment Text required.</span>
    </div>
    <button type="submit"  ng-click="replySubmitted = true" class="btn btn-primary blog-bubmit-button">Submit</button>
</form>

由于某些原因,上面的代码只是插入空数据而字段集中于无效。 任何建议都可以帮助我。 感谢

1 个答案:

答案 0 :(得分:1)

您已定义ng-app以将其处理为角度阻止。

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=''>
  <form ng-submit="addComment()" role="form" name="blogForm" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : blogForm.blogComment.$invalid && replySubmitted }">
      <textarea ng-model="blogComment" name="blogComment" class="form-control" rows="3" ng-required="true" required></textarea>
    </div>
    <div style="color:#a94442;" ng-show="blogForm.blogComment.$invalid && replySubmitted">
      <span ng-show="blogForm.blogComment.$error.required">Comment Text required.</span>
    </div>
    <button type="submit" ng-click="replySubmitted = true" class="btn btn-primary blog-bubmit-button">Submit</button>
  </form>
</div>
&#13;
&#13;
&#13;