AngularJS Form

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.

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

The aim of this section is to set some validations on the user input value and display an error message on the 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 AngularJS.

• $untouched
• $touched
• $pristine
• $valid
• $submitted

Note

All these validation states are of Boolean Type no matter if the value is True or False.

You can also download the complete source project. For more information about AngularJS, visit this blog.