AngularJS Forms

AngularJS facilitates you to create a form enriches with data binding and validation of input controls.

Input controls are ways for a user to enter data. A form is a collection of controls for the purpose of grouping related controls together.

Following are the input controls used in AngularJS forms:

input elements
select elements
button elements
textarea elements

AngularJS provides multiple events that can be associated with the HTML controls. These events are associated with the different HTML input elements.

Following is a list of events supported in AngularJS:

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

Data Binding

ng-model directive is used to provide data binding.

Let’s take an example where ng-model directive binds the input controller to the rest of your application

See this example:

       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" id="44a6dd0f5035a84060da79857ee143c0" type="PenciLazyScript"></script>  
<div ng-app="myApp" ng-controller="formCtrl">
<form>     First Name: <input ng-model="firstname" type="text">   </form>
</div>
<p>      </p>

Test it Now

You can also change the example in the following way:

See this example:

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" id="44a6dd0f5035a84060da79857ee143c0" type="PenciLazyScript"></script>  
<div ng-app="">
<form>     First Name: <input ng-model="firstname" type="text">   </form>
<h2>You entered: {{firstname}}</h2>
</div>
<p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>
<p>   </p>

Test it Now

AngularJS Checkbox

A checkbox has a value true or false. The ng-model directive is used for a checkbox.

See this example:

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" id="44a6dd0f5035a84060da79857ee143c0" type="PenciLazyScript"></script>  
<div ng-app="">
<form>     Check to show this:     <input ng-model="myVar" type="checkbox">   </form>
<h1 ng-show="myVar">Checked</h1>
</div>
<p>The ng-show attribute is set to true when the checkbox is checked.</p>
<p>   </p>

Test it Now

AngularJS Radio Buttons

ng-model directive is used to bind radio buttons in your applications.

Let's take an example to display some text, based on the value of the selected radio buttons. In this example, we are also using ng-switch directive to hide and show HTML sections depending on the value of the radio buttons.

See this example:

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" id="44a6dd0f5035a84060da79857ee143c0" type="PenciLazyScript"></script>  
<form>   Pick a topic:   <input ng-model="myVar" type="radio" value="tuts">Tutorials   <input ng-model="myVar" type="radio" value="fest">Festivals   <input ng-model="myVar" type="radio" value="news">News </form>
<div ng-switch="myVar">
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Welcome to the best tutorials over the net</p>
</div>
<div ng-switch-when="fest">
<h1>Festivals</h1>
<p>Most famous festivals</p>
</div>
<div ng-switch-when="news">
<h1>News</h1>
<p>Welcome to the news portal.</p>
</div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.</p>
<p>   </p>

Test it Now

AngularJS Selectbox

ng-model directive is used to bind select boxes to your application.

See this example:

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" id="44a6dd0f5035a84060da79857ee143c0" type="PenciLazyScript"></script>  
<form>   Select a topic:   <select ng-model="myVar"><option value="">     </option><option value="tuts">Tutorials     </option><option value="fest">Festivals     </option><option value="news">News   </option></select> </form>
<div ng-switch="myVar">
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Welcome to the best tutorials over the net.</p>
</div>
<div ng-switch-when="fest">
<h1>Festivals</h1>
<p>Most famous festivals.</p>
</div>
<div ng-switch-when="news">
<h1>News</h1>
<p>Welcome to the news portal.</p>
</div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.</p>
<p>    </p>

Test it Now

AngularJS form example

             <title>Angular JS Forms</title>       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" id="1e251a830ced8d8df4ddd016b5ffcf57" type="PenciLazyScript"></script>                                            
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate="">
<table border="0">
<tr>
<td>Enter first name:</td>
<td><input name="firstname" ng-model="firstName" required="" type="text">                      <span ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid" style="color:red">                         <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>                      </span>                   </td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input name="lastname" ng-model="lastName" required="" type="text">                      <span ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid" style="color:red">                         <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>                      </span>                   </td>
</tr>
<tr>
<td>Email: </td>
<td><input length="100" name="email" ng-model="email" required="" type="email">                      <span ng-show="studentForm.email.$dirty && studentForm.email.$invalid" style="color:red">                         <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>                      <button ng-click="reset()">Reset</button>                   </td>
<td>                      <button ng-click="submit()" ng-disabled="studentForm.firstname.$dirty && 
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty && 
                        studentForm.lastname.$invalid || studentForm.email.$dirty && 
                        studentForm.email.$invalid">Submit</button>                   </td>
</tr>
</table></form>
</div>
<p>                            </p>

Next TopicAngularjs Validation

AngularJS Forms

AngularJS Forms

Data Binding

AngularJS Checkbox

AngularJS Radio Buttons

AngularJS Selectbox

AngularJS form example

AngularJS AJAX

Cordova App Templates

You may also like