AngularJS Forms

Forms are used to get input from the user. A form usually contains html input controls. Some common html input controls are input elements such as text box, password box etc, buttons such as radio buttons, check boxes, drop down list and text area etc. We can use “ng-model” directive to get input values entered by the user via these control. Or in other words AngularJS Forms functions let us retrieve user input from forms. Take a look at the following example, here we shall get what user selected via checkbox.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

    
<div ng-app="" ng-init="val=true">
    <form>
        Check to show a header:
        <input type="checkbox" ng-model="val">
    </form>
    
    <h1 ng-bind="val"></h1>
</div>




</body>
</html>

Download the code Try the code

Open the above page in the browser, you shall see a checkbox which will be checked by default. Below the checkbox, “true” will be printed in heading one. Now if you un-check the check box, the corresponding h1 heading will change to false.

Now take a look at the code. Here we initialize a variable val with true via ng-init directive. We bound this value to check box via “ng-mode” directive. Notice that “ng-model” directive works two ways. It can be used to set the value of the checkbox and to retrieve the value of the checkbox as well. Therefore, since “val” contains true by default and it is bound to checkbox, by default checkbox is checked. Now if checkbox is unchecked the value of “val” variable changes to false. To make sure if value has changed, we print it in the h1 heading.

Capturing input from AngularJS Forms

Now lets create a complete form which contains multiple fields. We shall see how to obtain values from different fields within a form.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

    
<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="Student.StudentName"><br>
    Last Name:<br>
    <input type="text" ng-model="Student.StudentAge">
    <br><br>
       Do you require scholarship?:
        <input type="checkbox" ng-model="Student.Scholarship">
    <br></br>
     Gender:
    <select ng-model="Student.Gender">
        <option value="Male">Male
        <option value="Female">Female
    </select>
  </form>
  <p>form = {{Student}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.Student = {StudentName: "John", StudentAge: "Doe"};
  
});
</script>


</body>
</html>

Download the code Try the code

Open the above page in the browser. You will see a form with two text fields, one checkbox and one drop down list for gender. Below the form the object has been printed on the screen. In the controller we create “Student” object with two fields: StudentName and StudentAge. These two fields are bound to two text boxes and are by default displayed. The checkbox field is bound to “Student.Scholarship” field. Though this field is not defined in the controller, once you check the checkbox, it is generated at run time and added to the controller. Similarly dropdown field is bound to “Student.Gender” and it is also generated at run time.

The above example shows that binding objects with form is a two way process. You can fill a form field via built-in application variables. Similarly, you can create application variables via form fields.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .