Forms - AngularJS

AngularJS provides great way to create Forms which submit their data without postback.

AngularJS Forms use two directives:

  1. ng-model: The ng-model directives is used for binding input controls to Javascript Objects.
  2. ng-submit: Bind AngularJS Controller submit function to submit event of HTML Form. It also prevents the form to submit to server directly.


AngularJS Form Example

<html>
<head>
<title>AngularJS Form Example</title>
</head>
<body ng-app="testApp" ng-controller="mainCtrl">
	<form ng-submit="submit1()">
		<p>
			Enter First Name: <input type="textbox" ng-model="user.firstName" />
		</p>
		<p>
			Enter Last Name: <input type="textbox" ng-model="user.lastName" />
		</p>
		<p>
			<input type="submit" value="Submit" />
		</p>
	</form>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js" ></script>
<script>
	var app = angular.module('testApp', []);
	
	app.controller('mainCtrl', ['$scope', function($scope){
		$scope.user = {};
		$scope.user.firstName = "";
		$scope.user.lastName = "";
		$scope.submit1 = function()
		{
			console.log('FirstName: ' + $scope.user.firstName);
			console.log('LastName: ' + $scope.user.lastName);
		};
	}]);
</script>
</body>
</html>

Result:

AngularJS_Forms_Example_Result

  • In line 6 defines an testApp application using ng-app directive.
  • In line 6 defines an mainCtrl controller using ng-controller directive.
  • In line 7 defines a HTML form and ng-submit directive which bind to submit1() function of mainCtrl controller.
  • In line 9 bind the input textbox control to firstName property of user object using ng-model directive.
  • In line 11 bind the input textbox control to lastName property of user object using ng-model directive.
  • In line 15 defines a submit input control which call the submit function of mainCtrl controller.
  • In line 21 defines an AngularJS app 'testApp' using angular.module function.
  • In line 23 defines an AngularJS controller 'mainCtrl' using app.controller function.
  • In line 24 defines a user javascript object.
  • In line 25,26 create two properties firstName and lastName into user object.
  • In line 27 defines a submit function that print the firstName and lastName of user object into console.

Join our newsletter and get an occasional email with a technology and DotNetPattern.com news update.