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.
