Nested Forms - AngularJS

Nested Forms provides a great way to apply grouping of form controls.

Because HTML does not allow you to nest forms so AngularJS provides support for nested forms using ng-form directive.

Nested Forms is useful for creating grouping of form controls so that their validition can be implemented separately.


Nested Forms Example

<html>
<head>
<title>AngularJS Nested Form Example</title>
</head>
<body ng-app="testApp" ng-controller="mainCtrl">
	<form ng-submit="submit()" name="myForm">
		<p>
			Enter First Name: <input type="textbox" ng-model="user.firstName" />
		</p>
		<p>
			Enter Last Name: <input type="textbox" ng-model="user.lastName" />
		</p>
		<ng-form name="profile">
			<h2>Personal Information</h2>
			<p>
				Address 1: <input type="textbox" ng-model="user.profile.addr1" />
			<p>
			<p>
				Address 2: <input type="textbox" ng-model="user.profile.addr2" />
			</p>
		</ng-form>
		<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 = { firstName: '', lastName: ''};
		$scope.user.profile = { addr1: "", addr2: ""};
		
		$scope.submit = function()
		{
			console.log('FirstName: ' + $scope.user.firstName);
			console.log('LastName: ' + $scope.user.lastName);
			console.log('personal information');
			console.log('Address 1: ' + $scope.user.profile.addr1);
			console.log('Address 2: ' + $scope.user.profile.addr2);
			
		};
	}]);
</script>
</body>
</html>

Result:

AngularJS_Nested_Forms_Example_Result

  • Line 6 defines a AngularJS applicatino 'testApp' using ng-app directive.
  • Line 6 defines a 'mainCtrl' AngularJS controller using ng-controller directive.
  • Line 7 defines a HTML form name 'myForm' and bind submit() function to mainCtrl controller using ng-submit directive.
  • Line 9,12 binds the input controls to firstName and lastName properties of user javascript object.
  • Line 14 defines a nested form using ng-form directive name 'profile'.
  • Line 17, 18 binds the input controls to addr1, addr2 to profile object of user.
  • Line 24 defines a submit button.
  • Line 30 defines a new module 'testApp' using angular.module function.
  • Line 32 defines a AngularJS controller 'mainCtrl'.
  • Line 33 declare a user javascript object with two properties firstName, lastName.
  • Line 34 declare a profile property of user object with two properties addr1 and addr2.
  • Line 36 defines a submit button which show properties of user and profile objects in console.

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