Introduction:

Here we will explain to what is Forms in AngularJS or how to Forms in AngularJS or use input controls, select controls ,button controls, textarea controls in angularJS or how to bind form elements input controls ,select controls, button controls, textarea contols in angularJS with ng-model with Example:


Description:

AngularJS  Forms provides data-binding and validation of input controls.

Forms input Controls.

input elements

select elements

button elements

textarea elements

Data-Binding in input controls

AngularJS provide ng-model directive for Input controls data-binding.

<input type="text" ng-model="Name">

Validate data in input controls

Following can be used to track form error.

 $dirty – The form field has been modified.

$invalid − The form field content is not valid.

$error − Show an error message if the field has been.

EXAMPLE:

@{
    ViewBag.Title = "Home Page";
}
 
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/angular.js"></script>
 
 
<div ng-app="mainApp" ng-controller="MyController">
    <form name="userForm" novalidate>
        <table border="0">
            <tr>
                <td colspan="2" ><h2>AngularJS Application</h2></td>
            </tr>
            <tr>
                <td>Enter Name:</td>
                <td>
                    <input name="Name" type="text" ng-model="Name" required>
                    <span style="color:red" ng-show="userForm.Name.$dirty && userForm.Name.$invalid">
                        <span ng-show="userForm.Name.$error.required">Name is required.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td>Enter Number: </td>
                <td>
                    <input name="Contact" type="text" ng-model="Contact" required >
                    <span style="color:red" ng-show="userForm.Contact.$dirty && userForm.Contact.$invalid">
                        <span ng-show="userForm.Contact.$error.required">Number is required.</span>
                    </span>
                </td>
            </tr>
 
            <tr>
                <td>Enter Email: </td>
                <td>
                    <input name="email" type="email" ng-model="email" length="150" required>
                    <span style="color:red" ng-show="userForm.email.$dirty && userForm.email.$invalid">
                        <span ng-show="userForm.email.$error.required">Email is required.</span>
                        <span ng-show="userForm.email.$error.email">Invalid email address.</span>
                    </span>
                </td>
            </tr>
 
            <tr>
                <td>
                   
                </td>
                <td>
                    <button ng-disabled="userForm.Name.$dirty &&
                        userForm.Name.$invalid || userForm.Contact.$dirty &&
                        userForm.Contact.$invalid || userForm.email.$dirty &&
                        userForm.email.$invalid" ng-click="submit()">
                        Submit
                    </button>
                    <button ng-click="reset()">Reset</button>
                </td>
            </tr>
 
        </table>
    </form>
</div>
 
<script>
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('MyController', function ($scope) {
        $scope.Name = "Aditya Kumar";
        $scope.Contact = "7522019206";
        $scope.email = "aditya@adityapoint.com";
 
        $scope.reset = function () {
            $scope.Name = "";
            $scope.Contact = "";
            $scope.email = "";
        }
    });
</script>
<style>
    table {
        width:500px;
        margin:0 auto;
    }
     table, th, td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
    }
 
        table tr:nth-child(odd) {
            background-color: #ccc;
        }
 
        table tr:nth-child(even) {
            background-color: #ffffff;
        }
</style>


  •               Output

How to use Forms in AngularJS

Example Explained

 

The ng-app directive defines the AngularJS application.

The ng-controller directive defines the application controller.

The ng-model directive binds to input elements .

The reset() method Reset the form.

The ng-click directive invokes the reset() method, when button is clicked.



Thanks.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like