Angular.js is required and ng-required does not work for <textarea> </textarea>

Question

I cannot get Angular.js requiredor ng-requiredwork. I want where, if the user clicked ok, they should have text in the text box.

<div class="modal-body">
    <p>Your change will be logged. Please provide a ticket number or comment for reference</p>
    <div class="row">
        <div class="span4">
            <textarea type="text" class="form-control" 
                ng-model="commentBox.text" 
                ng-required="commentBox.text">
            </textarea>
        </div>
    </div>
</div>

Scratch my head .....

Answer 1

two things:

• make sure the value you pass to ng-required is boolean (in order to be technically correct, it must be evaluated as boolean)

   <textarea type="text" class="form-control" 
      ng-model="commentBox.text" 
      ng-required="commentBox.textRequired">
  </textarea>
  
  //somewhere in your controller
  $scope.commentBox.textRequired = true
  

• you will need a form. $ invalid on your button

  <button type="submit" ng-disabled="formname.$invalid" ng-click="onsubmit()"></button>
  

to complete it

   <ng-form name="exampleForm">
     <textarea type="text" ng-model="commentBox.text" ng-required="true"></textarea>
     <button ng-disabled="exampleForm.$invalid" ng-click="onsubmit()"></button>
   </ng-form>

Answer 2

also without adding another support, you can set it to ng-required = "!! commentBox.text"