AngularJS Forms - Creating Forms in AngularJS
Published August 13, 2022An AngularJS makes it easier for you to build forms for a web application. This form enhances data binding and input control validation to control user information. The data entry works via input elements of the forms. A form is a collection of controls that organize similar controls into one place. We will cover creating a form in angularjs with angular directive, angular select dropdown
The input controls utilized by AngularJS forms are listed below:
-
An input elements
-
A select elements
-
A buttons
-
A textarea element
The HTML controls in AngularJS connect to a variety of events. These occurrences connect to the various HTML input components.
Syntax
The following syntax shows the input element of the form.
|
<form><input type="text"></form> |
The following syntax shows the select element of the form.
|
<form><select ng-model="myFun"> <option value="value">Title <option value="value1">Title1 </select></form> |
The following syntax shows the button element of the form.
|
<form><button ng-click = "submit()">Click Me!</button></form> |
The following syntax shows the textarea element of the form.
|
<form><textarea ></textarea></form> |
How to create Form in AngularJS
The following examples show how to filter uses in different AngularJS value functions.
Example#1: The AngularJS form with the Basic element.
|
<!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="formCtrl"> <h3>AngularJS Form</h3> <form> User Name:<br> <input type="text"><br> Email:<br> <input type="email"> <br> <input type="checkbox"> Male <input type="checkbox"> FeMale <br> <textarea></textarea><br> <button ng-click="submit()">Submit</button> </form> </div> </body> </html> |
Output
 |
Create AngularJS Forms with Directives
|
<!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <h3>AngularJS Form</h3> <form> User Name:<br> <input type="text" ng-model="userName"><br> Email:<br> <input type="email" ng-model="email"> <br> <input type="checkbox" ng-model="user" value="Male"> Male <input type="checkbox" ng-model="user1"> FeMale <br> <button ng-click="submit()">Submit</button> </form> <p>User Name: {{userName}}</p> <p>Email Id: {{email}}</p> </div> </body> </html> |
Output
 |
Example#3: Create Angular Form with Select Directive
|
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app=""> <h4> AngularJs Forms</h4> <form> Select a Tutorial: <select ng-model="myTut"> <option value=""> <option value="an">AngularJs <option value="jv">Java <option value="php">PHP </select> </form> <div ng-switch="myTut"> <div ng-switch-when="an"> <h5>AngularJs</h5> </div> <div ng-switch-when="jv"> <h5>JAVA</h5> </div> <div ng-switch-when="php"> <h5>PHP</h5> </div> </div> </body> </html> |
Output
 |
Summary
The AngularJS form works with user interaction data with the backend display directive. The single page handles input and output information using form elements and their directive
|
Article Contributed By :
|
|
|
|
|
207 Views |
|