AngularJS Forms
AngularJS support form validation , data binding , data filling with input control.A form hold multiple control , you can bind a group control , validated with data filling when submit the form.You can use $dirty and $invalid flag to do form status the validations.
AngularJS works on the type of input control
AngularJS works on different event associated with the different controls. Below is the list of event that AngularJS works with.
Example
AngularJS Radio Buttons
When Radio is checked , it return true else false.
The ng-model directive can be bind with radio buttons.
Below is Live Example
AngularJS Internationalization Example
AngularJS support form validation , data binding , data filling with input control.A form hold multiple control , you can bind a group control , validated with data filling when submit the form.You can use $dirty and $invalid flag to do form status the validations.
AngularJS works on the type of input control
- input elements
- select elements
- button elements
- textarea elements
AngularJS works on different event associated with the different controls. Below is the list of event that AngularJS works with.
- 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 with input control.Data Binding means , when two or more control is binded , change in one control property will change other control property.
Example
ng-model directive is used to provide data binding with input control.Data Binding means , when two or more control is binded , change in one control property will change other control property.
Example
<html>
<head>
<title>AngularJS
Internationalization Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body>
<h1>AngularJS
Data Binding Example</h1>
<form>
<div
ng-app="">
Enter
text here :
<input
type="text"
ng-model="myModel"
/> <br
/>
Here
is the output :<input
type="text"
ng-model="myModel"
/>
</div>
</form>
</body>
</html>
Output :
The above example bind two input control with a ng-mode "myModel" ,when one control text change , other control text also change.
AngularJS Checkbox
When checkbox is checked , it return true else false.
The ng-model directive can be bind with checkbox.
When checkbox is checked , it return true else false.
The ng-model directive can be bind with checkbox.
Example
<html>
<head>
<title>AngularJS
Internationalization Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body>
<h1>
AngularJS
Chackbox Example</h1>
<form>
<div
ng-app="">
<input
type="checkbox"
ng-model="myModel">
<br
/>
<span
ng-show="myModel"
>You
have checked the checkbox.</span>
</div>
</form>
</body>
</html>
Output :
AngularJS Radio Buttons
When Radio is checked , it return true else false.
The ng-model directive can be bind with radio buttons.
Example
<html>
<head>
<title>AngularJS
Internationalization Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body>
<h1>
AngularJS
Radio Example</h1>
<form>
<div
ng-app="">
<input
type="radio"
ng-model="myModel"
value="val1">Radio
1
<input
type="radio"
ng-model="myModel"
value="val2">Radio
2
<br
/>
<div
ng-switch="myModel">
<div
ng-switch-when="val1">
<h1>You
have selected Radio 1
</h1>
<p>Thank
you for trying ! </p>
</div>
<div
ng-switch-when="val2">
<h1>You
have selected Radio 2
</h1>
<p>Thank
you for trying ! </p>
</div>
</div>
</div>
</form>
</body>
</html>
Output :
You have noticed , model "myModel" is bonded with radio button . When radio button is selected , corresponding text is shows.
Example
<html>
<head>
<title>AngularJS
Internationalization Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body>
<h1>
AngularJS
Radio Example</h1>
<form>
<div
ng-app="">
Country
Name :
<select
ng-model="myModel">
<option
value="">Select
a Country Name</option>
<option
value="INDIA">INDIA</option>
<option
value="USA">USA</option>
<option
value="CHINA">CHINA</option>
<option
value="BRAZIL">BRAZIL</option>
<option
value="HOLLAND">HOLLAND</option>
<option
value="PAKISTAN">PAKISTAN</option>
<option
value="RUSSIA">RUSSIA</option>
</select>
<br
/>
<br
/>
<br
/>
Here
is the Result : <input
type="text"
ng-model="myModel"
/>
</div>
</form>
</body>
</html>
Output :
Validate data
Following can be used to validate a form.- $dirty − tells that that value has been changed.
- $invalid − tells that value entered is invalid.
- $error − tells the exact error.
Below is Live Example
AngularJS Live Example
Here is code of the above example
<html>
<head>
<title>AngularJS
Internationalization Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<script>
var
App = angular.module("myApp",
[]);
App.controller('myController',
function
($scope)
{
$scope.myData
= '';
$scope.submit
= function
()
{
//your
custom code
}
});
</script>
<body
ng-app="myApp"
ng-controller="myController">
<h1>
AngularJS
Live Example</h1>
<form
name="myForm">
<table>
<tr>
<td>
<fieldset>
<legend>Data
Binding Example:</legend>
<table>
<tr>
<td>
Enter
Your Name :
</td>
<td>
<input
type="text"
ng-model="myData.myName"
required
/>
</td>
</tr>
<tr>
<td>
Here
is your Name :
</td>
<td>
<input
type="text"
ng-model="myData.myName"
ng-disabled="true"
/>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>AngularJS
Chackbox Example:</legend>
<table>
<tr>
<td>
<div >
<input
type="checkbox"
ng-model="myData.myCkb"
required>
<br
/>
<span
ng-show="myData.myCkb">You
have checked the checkbox.</span>
</div>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>AngularJS
Radio Example :</legend>
<table>
<tr>
<td>
<div>
<input
type="radio"
ng-model="myData.myRadio"
value="val1"
>Radio
1
<input
type="radio"
ng-model="myData.myRadio"
value="val2">Radio
2
<br
/>
<div
ng-switch="myData.myRadio">
<div
ng-switch-when="val1">
<h5>
You
have selected Radio 1
</h5>
<p>
Thank
you for trying !
</p>
</div>
<div
ng-switch-when="val2">
<h1>
You
have selected Radio 2
</h1>
<p>
Thank
you for trying !
</p>
</div>
</div>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>AngularJS
Radio Example:</legend>
<table>
<tr>
<td>
<div
">
Country
Name :
<select
ng-model="myData.mySelect"
required>
<option
value="">Select
a Country Name</option>
<option
value="INDIA">INDIA</option>
<option
value="USA">USA</option>
<option
value="CHINA">CHINA</option>
<option
value="BRAZIL">BRAZIL</option>
<option
value="HOLLAND">HOLLAND</option>
<option
value="PAKISTAN">PAKISTAN</option>
<option
value="RUSSIA">RUSSIA</option>
</select>
<br
/>
<br
/>
<br
/>
Here
is the Result : <input
type="text"
ng-model="myData.mySelect"
/>
</div>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<button
ng-disabled="myForm.myName.$dirty
&& myForm.myName.$invalid"
ng-click="submit()">
Submit</button>
</td>
</tr>
<tr>
<td>
Your
Data :{{myData}}
</td>
</tr>
</table>
</form>
</body>
</html>
