AngularJS - Nested forms - Child form reference from parent form

by manikantag

HTML

<script type="text/ng-template" id="childTmpl">
    <h4>Child form (2nd include)</h4>
    <ng-form name="childForm">
        <input type="email" name="email" ng-model="email_child" placeholder="Enter any value" ng-required="true" />
        <span class="error_message" ng-show="childForm.email.$invalid">Email invalid</span><br/>
    	<input type="button" value="Child form submit" ng-disabled="childForm.$invalid" class="buttonAction"/ /> <br/><br/>
    </ng-form>
    <strong>childForm invalid (ngInclude):</strong> {{childForm.$invalid}}
	</script>
	
	<script type="text/ng-template" id="intermediateTmpl">
    <h4>Intermediate form (1st include)</h4>
    <ng-form name="intermediateForm">
        <div ng-include src="'childTmpl'"  style="background-color: lightgreen;border:1px dotted gray; margin: 10px; padding: 5px;"></div>
        <input type="email" name="email" ng-model="email_intermediate" placeholder="Enter any value" ng-required="true" />
        <span class="error_message" ng-show="intermediateForm.email.$invalid">Email invalid</span><br/>
    	<input type="button" value="Intermediate form submit" ng-disabled="intermediateForm.$invalid" class="buttonAction"/ /> <br/><br/>
    </ng-form>
    <strong>Child form invalid (ngInclude):</strong> {{intermediateForm.childForm.$invalid}}<br />
    <strong>Intermediate form invalid (ngInclude):</strong> {{intermediateForm.$invalid}}
	</script>

<body ng-app="myApp">
    <div style="background-color: lightblue; padding: 5px">
			<form name="parentForm">
				<h3>Parent form</h3>
				<div ng-include src="'intermediateTmpl'" style="background-color: lightyellow; border: 1px dotted gray; margin: 10px; padding: 5px;"></div>
				<input type="email" name="email" ng-model="email_parent" placeholder="Enter any value" ng-required="true" />
				<span class="error_message" ng-show="parentForm.email.$invalid">Email invalid</span><br />
			</form>
			<input type="button" value="Parent form submit" ng-disabled="parentForm.$invalid"...

JavaScript

var myApp = angular.module('myApp', []);