ng-dynaform/src/app/app.component.html

<div class="central-col content-container mb-4">
	<div class="clr-row">
		<div class="clr-col-12 pt-4 pb-2">
			<h1>NgDynaform: Clarity Edition</h1>
			<p>
			<b>Dynamic Form Layout Module</b><br>
			Load different tests by appending a query param to the URL <b>?test=N</b> (where N is a number between 1 and 16).<br>
			NOTE: Model set to update on change, but this can be set to blur or submit for less re-rendering.
			</p>
			<br>
		</div>
	</div>
	<app-dynaform [formGroup]="form" [meta]="meta" [template]="tref" (call)="handleCallback($event)" debug="1"></app-dynaform>
	<!-- Uncomment to test access to deeply-nested FormGroups using formGroupName -->
	<!--
	<form [formGroup]="form">
		<span formGroupName="dynaformtest">
			<span formGroupName="d">
				<app-dynaform formGroupName="g" [meta]="meta" [template]="tref"></app-dynaform>
			</span>
		</span>
	</form>
	-->
	<div class="clr-row">
		<div class="clr-col-12 pt-4 pb-4">
			<json-formatter [data]="form.value" open="4"></json-formatter>
		</div>
	</div>
</div>





<ng-template #testTemplate_NOTWORKING let-control="control" let-meta="meta">

	<div class="form-group clr-row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(meta.type)">
		<label class="clr-col-sm-4" [for]="meta.name" style="color: purple">{{ meta.label }}</label>
		<div class="clr-col-sm-8">
			<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
		</div>
	</div>
	
	<ng-template #recursiveDynaform>
		<div class="clr-row pt-3">
			<h3 class="clr-col-sm-12" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
		</div>
		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handleCallback($event)"></app-dynaform>
	</ng-template>

</ng-template>