Using AngularJS to display form validation errors

Question

Here's my current html code:

<div class="form-group" ng-class="{ 'has-error' : form.inputName.$invalid && !form.inputName.$pristine }">
    <label for="inputName" class="col-sm-4 control-label"><font color='RED'>* </font>Name</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" ng-model="name" name="inputName" id="inputName" placeholder="Enter in a name." required />
        <p ng-show="form.form.$invalid && !form.form.$pristine" class="help-block">Name is required.</p>
    </div>
</div>

Now this works well for fields that are mandatory for any case.

However, let's say the user could pick a tab like Hair Style and had to describe the color field and the length field. If these fields are blank, then display a small message (like ng-show). So based on whatever tab the user selects, if the proper information for that tab is not inputted, the user should see an error. How would I use angular to display that?

Eg. Controller code...

$scope.someButtonPressed = function() {
    if ($scope.color == "") {
        // display ng-show for color
        // input field should have a red border to it
    }
}

Here is where I got my html error validation code from: http://codepen.io/sevilayha/pen/xFcdI

Navaneet · Accepted Answer · 2015-06-11 19:10:04Z

3

You should refer https://scotch.io/tutorials/angularjs-form-validation which has detailed explanation and an example.

Also this doc is must a read!!

If you want to make border color for a compulsory field then refer this. You could use ng-invalid class for ng-required fields

edited Jun 11, 2015 at 19:10

answered Jun 11, 2015 at 19:02

Navaneet

1,3871 gold badge20 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using AngularJS to display form validation errors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related