Angularjs form validation

Updated : May 04, 2020 in Angular

Angularjs form validation

In this article, we will discuss how to implement AngularJs form validation step by step

Introduction About AngularJs forms

AngularJS Applications are facilitated to create a form that enriches data binding and validation of input controls. see link how to setup angularJs application

The application form is a collection of controls for the purpose of grouping related controls together. follow some of the input controls are used in AngularJS forms:

  • input elements tag
  • button elements tag
  • select elements tag
  • textarea elements tag

Data Binding In angulaJS

In angularjs the give events are associated with the different HTML input elements.

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-keydown
  • ng-keyup
  • ng-mouseenter
  • ng-mouseleave
  • ng-keypress

ng-model directive: it is used to provides the data binding in Angularjs, let us the given below example how to bind the input controller to your Application

input filed:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="formCtrl">
        <form>
            First Name: <input type="text" ng-model="firstname">
        </form>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('formCtrl', function ($scope) {
            $scope.firstname = "Tutorials Helper";
        });
    </script>
</body>
</html>  

Radio Buttons:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">
    <form>
        Choose a Course:
        <input type="radio" ng-model="myVara" value="d1" />Turorails Helper
        <input type="radio" ng-model="myVara" value="d2" />MVC
        <input type="radio" ng-model="myVara" value="d3" />Java
    </form>
    <div ng-switch="myVara">
        <div ng-switch-when="d1">
            <h3>Tutorials Helper</h3>
            <p>Welcome to the best atricesl  blog</p>
        </div>
        <div ng-switch-when="d2">
            <h3>MVC</h3>
            <p>Asp.net Mvc Framework </p>
        </div>
        <div ng-switch-when="d3">
            <h3>Java</h3>
            <p>Basic core java.</p>
        </div>
    </div>
    <p>
        this example  "ng-switch" directive hides and shows HTML parst it is  depending on the
        value of the radio buttons.
    </p>
</body>
</html>

Example: this example “ng-switch” directive hides and shows HTML parst it is depending on the value of the radio buttons.

Choose a Course: Turorails Helper MVC Java

Tutorials Helper

Welcome to the best atricesl blog

MVC

Asp.net Mvc Framework

Java

Basic core java.


Checkbox: The ng-show attribute is set to true whenever the checkbox is checked.

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <form>
            show : <input type="checkbox" ng-model="myVara" />
        </form>
        <h3 ng-show="myVara">Checked</h3>
    </div>
    <p>The ng-show attribute is set to true whenever the checkbox is checked.</p>
</body>
</html>
show :

Checked

The ng-show attribute is set to true whenever the checkbox is checked.


Angularjs form validation

AngularJS Applications provide us client-side form validations. AngularJS will check the state of the Application form and input fields (input fields, Textarea fields, select). and user current state also.

AngularJS also holds the information about the form of whether the input fields have been touched, or modified, or not.
the given directives are generally we will use to track errors in an AngularJS form:

  • $dirty – states that value has been changed.
  • $invalid – states that the value entered is invalid.
  • $error – states the exact error.

See the given below AngularJS Sample form

<!DOCTYPE html>
<html>
<head>
    <title>Angularjs form validation</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <style>
        table,
        th,
        td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h3> AngularJS Sample form Application  </h3>
    <div ng-app="mainApp" ng-controller="studentController">
        <form name="studentForm" novalidate>
            <table border="0">
                <tr>
                    <td>First name:</td>
                    <td>
                        <input name="firstname"
                               type="text"
                               ng-model="firstName"
                               required />
                        <span style="color:red"
                              ng-show="studentForm.firstname.$dirty &amp;&amp; studentForm.firstname.$invalid">
                            <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
                        </span>
                    </td>
                </tr>

                <tr>
                    <td>Last name:</td>
                    <td>
                        <input name="lastname" type="text" ng-model="lastName" required />
                        <span style="color:red"
                              ng-show="studentForm.lastname.$dirty &amp;&amp; studentForm.lastname.$invalid">
                            <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
                        </span>
                    </td>
                </tr>

                <tr>
                    <td>Email:</td>
                    <td>
                        <input name="email"
                               type="email"
                               ng-model="email"
                               length="100"
                               required />
                        <span style="color:red"
                              ng-show="studentForm.email.$dirty &amp;&amp; studentForm.email.$invalid">
                            <span ng-show="studentForm.email.$error.required">Email is required.</span>
                            <span ng-show="studentForm.email.$error.email">Invalid email address.</span>
                        </span>
                    </td>
                </tr>

                <tr>
                    <td><button ng-click="reset()">Reset</button></td>
                    <td>
                        <button ng-disabled="studentForm.firstname.$dirty &amp;&amp;
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &amp;&amp;
                        studentForm.lastname.$invalid || studentForm.email.$dirty &amp;&amp;
                        studentForm.email.$invalid"
                                ng-click="submit()">
                            Submit
                        </button>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        var mainApp = angular.module("mainApp", []);

        mainApp.controller("studentController", function ($scope) {
            $scope.reset = function () {
                $scope.firstName = "Tutorials ";
                $scope.lastName = "helper";
                $scope.email = "[email protected]";
            };

            $scope.reset();
        });
    </script>
</body>
</html>
AngularJS Sample form
AngularJS Sample form

Related resource :

Latest posts by DuttaluruVijayakumar (see all)
Like
Like Love Haha Wow Sad Angry
2

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ankit Kumar
May 15, 2020 5:40 pm

Excellent Tutorial website

2
0
Would love your thoughts, please comment.x
()
x