Blog

12 Oct 2018

AngularJS Forms

When user want to interact with the application forms play an important role for user communication. User interface must be user friendly in a web application. In AngularJS forms are basically used to make an elegant user interface including with data validation and data binding.

Initially we should start with some HTML input controls like input, select elements and buttons.

eg: – Let us take an example with radio button where we select a single item at a time.

For Example:

<body ng-app=””>

<form>

Pick a color:

<input type=”radio” ng-model=”colorInfo” value=”red”>Red

<input type=”radio” ng-model=”colorInfo”   value=”green”>Green

<input type=”radio” ng-model=”colorInfo” value=”blue”>Blue

</form>

 

<div ng-switch=” colorInfo “>

<div ng-switch-when=”red”>

<h1>Red</h1>

<p>Welcome to a world of Red.</p>

</div>

<div ng-switch-when=”green”>

<h1>Green</h1>

<p>Welcome to world of green.</p>

</div>

<div ng-switch-when=”blue”>

<h1>Blue</h1>

<p>Welcome to world of blue.</p>

</div>

</div>

 

Output: – Pick a color:            Red         Green    Blue

Red

Welcome to a world of Red.      

In this example we have to use ng-switch directive which will select one choice at a time. In the above example Red will be chosen by the user.

 

Let us take another example. In this example ng-show attribute become true when checkbox is selected.

For Example:

<div ng-app=””>

<form>

Check to show a part of header:

<input type=”checkbox” ng-model=”checkBoxSelection”>

</form>

<h1 ng-show=” checkBoxSelection “>this is the header part</h1>

</div>

 

Output: –     Check to show a part of header:

this is the header part

 

In the above example when users select the particular checkbox, header part will show.

 

Let us take some brief about used directive.

  • ng-app directive is basically used to define the AngularJS application.
  • ng-controller directive is basically used to define the application controller.
  • ng-model directive is basically used to binds two input elements to the user object in the model.
  • formCtrl controller is basically used  to provide initial values to the master object, and defines the reset() method.
  • reset() method is basically used   to sets the user object equal to the master object.
  • ng-click directive is basically used  to invokes the reset () method, only if the button is clicked.

Angular JS Training

In Just 4 Days
Enroll Now