AngularJS Forms - Creating Forms in AngularJS

Published August 13, 2022

An 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

Angular Form example

 

 

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 

Angular form with Directives

 

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 

Creating form in Angular with Select directive

 

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