12 spalis 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.


<body ng-app=””>


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”>


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

</ Div>

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


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

</ Div>

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


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

</ Div>

</ Div>

Output: – Pick a color: Red Green Blue


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.


<div ng-app=””>


Check to show a part of header:

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

</ Form>

<h1 ng-show=” checkBoxSelection XCHARX>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 vartotojas object in the model.
  • formCtrl controller is basically used to provide initial values to the meistras object, and defines the reset() metodas.
  • reset() method is basically used to sets the vartotojas object equal to the meistras objektas
  • ng-click directive is basically used to invokes the reset () method, only if the button is clicked.

Angular JS Training

In Just 4 Days
Užsiregistruoti dabar

GTranslate Your license is inactive or expired, please subscribe again!