Part 11: Angular Js Forms

Creating a form and submitting a form is the most important part of any web application. Form allows programmers to get feedback from the user. Forms are also used to get user information. But the important point here is that, Are the information submitted by user are in proper format or not. So, we need to check (validate) each and every field submitted by user.

Aim of this section, is to set some validations on the user input value and display error message on wrong input.

HTML Code

<div ng-app="mainApp" ng-controller="studentController">

        <form name="studentForm" novalidate class="form">

            <h2 style="margin-left:75px;"><u>Angular JS Form</u></h2>

              <table border="0">

      <tr>

                    <td>Enter your 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>Enter your 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>Enter your email id: </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 colspan="2">

                        <button ng-disabled="studentForm.firstname.$dirty &&

                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &&

                        studentForm.lastname.$invalid || studentForm.email.$dirty &&

                        studentForm.email.$invalid" ng-click="submit()" class="btn">

                            Submit

                        </button>

                        <button ng-click="reset()">Reset</button>

                    </td>

                </tr>

            </table>

Script.Js

<script>

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

         mainApp.controller('studentController', function($scope) {

            $scope.reset = function(){

               $scope.firstName = "";

               $scope.lastName = "";

               $scope.email = "";

            }

            $scope.reset();

            $scope.submit = function () {

                var firstName = $scope.firstName;

                var lastName = $scope.lastName;

                var email = $scope.email;

               

                alert('Information Submitted by You:\n First Name: ' + firstName +

                    '\n Last Name: ' + lastName+ '\n Email Id: '+email);

            }

         

         });

    </script>

CSS:

<style>

        table, th, td {

            border: 1px solid grey;

            border-collapse: collapse;

            padding: 5px;

        }

            table tr:nth-child(odd) {

                background-color: #98c7ba;

            }

            table tr:nth-child(even) {

                background-color: #ffffff;

            }

        .form {

       

        margin-left:500px;

        margin-top:100px;

      

        }

        .btn {

        margin-left:95px;

        }

    </style>

Output:

Explanation of validations states:

  ð  $dirty:  True if the user has already interacted with the form.

  ð $error: It states the exact error.

  ð $Invalid: It states that the entered value is invalid

There are many more validation states available in Angular Js

  ð $untouched

  ð $touched  

  ð $pristine

  ð $valid

  ð $submitted

Note: All these validation states are of Boolean Type Either the value is True or False.