Angular JS textarea validation with required＆showing error message

Question

私は、テキストエリアが空であれば、検証を実装し、フィールドバックに焦点を当てたいところにAngular JSコードを持っています。上記のコードは、単に空のデータを挿入し、フィールドが無効集束され、いくつかの理由のため

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

。 私は何か助けになるかもしれません。 ありがとう

Answer 1

角度ブロックとして処理するにはng-appを定義してください。

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