Home > DeveloperSection > Beginner > AngularJs Form & Validation

AngularJs Form & Validation


Angular JS Angular JS  JavaScript  Single Page App 
Ratings:
2 Comment(s)
 4096  View(s)
Rate this:

AngularJs Form & Validation

In this article, I’m explaining how to use angularjs with html form and how to validate the form using angularjs validation.

 

Example

First create an empty asp.net web application and add a webform to it:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"

Inherits="AngularJsForms.WebForm1" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">

</script>

    <script>

        function formvalidateController($scope) {

           

 

            $scope.submitForm = function (IsValid) {

                if (IsValid) {

                    alert("Registration Form is submitted");

                }

            }

 

        }

    </script>

</head>

<body>

    <div>

        <h2> Regidtration Form</h2>

        <form ng-app="" ng-controller="formvalidateController" name="InputForm" ng-submit="submitForm(InputForm.$valid)" novalidate >

            <p>

                  Name :

               <input type="text" ng-model="name" name="name" required />

                <span style="colorred;" ng-show="InputForm.name.$dirty && InputForm.name.$invalid">

                    <span ng-show="InputForm.name.$error.required">Name is mandatory</span>

                </span>

            </p>

 

            <p>

                Email Id :

               <input type="email" ng-model="email" name="email" required />

                <span style="color:red;" ng-show="InputForm.email.$dirty && InputForm.email.$invalid">

                    <span ng-show="InputForm.email.$error.required">Email Id is mandatory</span>

                    <span ng-show="InputForm.email.$error.email">Invalid email id</span>

                </span>

            </p>

 

            <p>

                Password :

                <input type="password" ng-model="password" name="password" required ng-minlength="3" ng-maxlength="8"/>

                <span style="color:red;" ng-show="InputForm.password.$dirty && InputForm.password.$invalid">

                    <span ng-show="InputForm.password.$error.required">Password is mandatory</span>

                    <span ng-show="InputForm.password.$error.minlength">Minimum password length is 3</span>

                    <span ng-show="InputForm.password.$error.maxlength">Maximum passord length is 8</span>

                </span>

            </p>

 

 

            <p>

                <input type="submit" ng-disabled="InputForm.name.$dirty && InputForm.name.$invalid || InputForm.email.$dirty && InputForm.email.$invalid || InputForm.password.$dirty && InputForm.password.$invalid"/>

            </p>

        </form>

    </div>

 

</body>

</html>

 

Output

Now run the application

 

AngularJs Form & Validation

Now fill the form:

AngularJs Form & Validation

AngularJs Form & Validation

AngularJs Form & Validation

AngularJs Form & Validation

When all the values are correct, click on Submit button:

AngularJs Form & Validation

 


Nice article

By Chintoo Semi on   2 years ago
Nice article

good article

By Chintoo Semi on   2 years ago
good article 

Don't want to miss updates? Please click the below button!

Follow MindStick