AngularJS Forms


Forms in AngularJS provides data-binding and validation of input controls.

Data-Binding

Input controls provides data-binding by using the ng-model directive.

Input Controls

Input controls are the HTML input elements Ex: Input, Select box, Button, Checkbox and text area

Input Element

The ng-model directive binds the input controller to the rest of your application.

Selectbox element

Bind select boxes to your application with the ng-model directive. The property defined in the ng-model attribute will have the value of the selected option in the selectbox.

button elements

Action will be exceuted based on button click

Textarea elements

Long area message box.

Checkbox elements

A checkbox has the value true or false. Apply the ng-model directive to a checkbox, and use its value in your application.

Radiobuttons elements

Bind radio buttons to your application with the ng-model directive. Radio buttons with the same ng-model can have different values, but only the selected one will be used.

Angular JS Form Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
	 <form>
		Name: <input type="text" ng-model="name"><br/>
	   
		Education
		Master: <input type="checkbox" ng-model="master">
		   Batchler:<input type="checkbox" ng-model="batch">
		<br/>
		Sex:
		  <input type="radio" ng-model="sex" value="male">male
		  <input type="radio" ng-model="sex" value="female">female
	 </form>

	<h1>Personal Details</h1>
		 <b>Name:</b> {{name}}<br/>

		<b>Education:</b> <span ng-show="master">Master</span ><span ng-show="batch">Batchler</span >
		<br/>
		<b>Sex:</b> {{sex}}

</body>
</html>
Above example execution

AngularJs Form