by DuttaluruVijayakumar 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.

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>

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 && 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 && 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 && 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 &&
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
                        studentForm.lastname.$invalid || studentForm.email.$dirty &&
                        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>

Related resource :

Create dynamic table using Api in angular js

Author
Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

Latest posts by DuttaluruVijayakumar (see all)