How to perform validation in Angular.js

Question

I have a form like below:

    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="nomargin">Let us know your concern or question and we will try to respond within 24 hours.</h4>
</div>
<div class="modal-body paddingmodal2">
    <form id="support-form" name="supportForm"  class="nobottommargin" novalidate="">
      <div class="col_full">
            <label for="login-form-username">Description <small>*</small></label>
            <textarea rows="4" cols="50" type="text"  ng-class="{'error': submitted && supportForm.description.$error.required}" id="login-form-username" name="username" class="sm-form-control" ng-model = 'support.description' required/>
        </div>
        <div class="alert" role="alert" ng-class="{'alert-danger':!isLoginSuccess, 'alert-success':isLoginSuccess}" ng-show="isShowLoginAlert" ng-bind="loginSubmitStatusMsg"></div>
        <div class="col_full nobottommargin no-margin-col-full">
            <button type="submit" class="button button-3d button-black nomargin col_full" id="login-form-submit" name="submit-bt" ng-click="saveSupportData(supportForm,support)" ng-disabled="isDisableLoginBtn">Submit</button>
        </div>

    </form>
</div>

JavaScript:

$scope.saveSupportData = function(supportForm,data){
                 if(supportForm.$invalid){
                    return;
                }
}

when I click on button the text area border should be highlighted but its not happening.

Can anyone suggest help please.

Answer 1

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.

This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.

This allows us to extend the above example with these features:

Custom error message displayed after the user interacted with a control (i.e. when $touched is set) Custom error message displayed upon submitting the form ($submitted is set), even if the user didn't interact with a control

It should be

ng-class="{'error': submitted && supportForm.username.$error.required}"

because your field name is username. Submitted should be true when form is posted Try this

$scope.saveSupportData = function(supportForm,data){
    $scope.submitted=true;
     if(supportForm.$invalid){
      return;
   }
}