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

<ng-container *ngFor="let rowName of dynaFormRows">
	<ng-container *ngTemplateOutlet="template ? template : default; context: getTemplateContext(rowName)"></ng-container>
</ng-container>


<!-- Default template for form node (field, repeating field, container, or repeating container)
		used when a TemplateRef is NOT supplied to component -->
<ng-template let-control="control" let-meta="meta" #default>
	<ng-container *ngIf="meta.type !== 'Hidden'">

		<ng-container *ngIf="!meta.noLabel; else fullWidth">
			<div *ngIf="isField(meta); else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
				<ng-container dynafield
					[control]="control"
					[meta]="meta"
					(call)="handleCallback($event)"
				></ng-container>
			</div>
		</ng-container>

		<ng-template #recursiveDynaform>
			<ng-container *ngIf="isRepeatingField(meta)">
				<ng-container *ngFor="let field of meta.meta; let i = index">
					<ng-container *ngTemplateOutlet="dynafield; context: getRepeatingFieldTemplateContext(meta.name, i)"></ng-container>
				</ng-container>
			</ng-container>
			<ng-container *ngIf="isRepeatingContainer(meta); else container">
				<div *ngIf="meta.display === 'SINGLE'" class="clr-row dyna-rc-selector">
					<div class="clr-col-sm-2 text-right dyna-rc-focus-block">
						<b>FOCUS &gt;</b>
					</div>
					<div class="clr-col-sm-10">
						<button *ngFor="let container of meta.meta; let i = index"
							class="btn btn-sm dyna-rc-btn-focus"
							[ngClass]="container.focussed ? 'btn-primary' : ''"
							(click)="focusContainer(meta.name, i)">
							{{ getRCLabel(meta.name, i) }}
						</button>
						<button *ngIf="meta.showAddControl"
							class="btn btn-sm btn-success dyna-rc-btn-add"
							[disabled]="!addRCMemberAllowed(meta.name)"
							(click)="addRCMember(meta.name)">
							<clr-icon shape="plus"></clr-icon> Add New
						</button>
					</div>
				</div>
				<div *ngFor="let container of meta.meta; let i = index" class="dyna-rc-container" [ngClass]="{ 'dyna-rc-display-all': meta.display === 'ALL' }">
					<button *ngIf="meta.showDeleteControl"
						class="btn btn-sm btn-icon btn-outline-danger dyna-rc-btn-delete"
						[ngClass]="{ 'dyna-hidden': !meta.meta[i].focussed }"
						[disabled]="!deleteRCMemberAllowed(meta.name)"
						(click)="deleteRCMember(meta.name, i)">
						<clr-icon shape="trash"></clr-icon>
					</button>
					<ng-container *ngTemplateOutlet="dynaform; context: getRepeatingContainerTemplateContext(meta.name, i)"></ng-container>
				</div>
				<div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="clr-row">
					<div class="clr-col-sm-12">
						<button
							class="btn btn-sm btn-success dyna-rc-btn-add"
							[ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
							(click)="addRCMember(meta.name)">
							<clr-icon shape="plus"></clr-icon> Add New
						</button>
					</div>
				</div>
			</ng-container>
		</ng-template>

		<ng-template #container>
			<ng-container *ngTemplateOutlet="dynaform; context: { control: control, meta: meta }"></ng-container>
		</ng-template>

		<ng-template #fullWidth>
			<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
		</ng-template>

	</ng-container>
</ng-template>


<!-- The DYNAFORM template -->
<ng-template let-control="control" let-meta="meta" #dynaform>
	<div [ngClass]="getRowClass(control, meta)">
		<h3 *ngIf="meta.label" class="h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" [ngClass]="{ 'dyna-hidden': !meta.focussed }" (call)="handleCallback($event)"></app-dynaform>
	</div>
</ng-template>


<!-- The DYNAFIELD template -->
<ng-template let-control="control" let-meta="meta" #dynafield>
	<div *ngIf="isField(meta); else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
		<ng-container dynafield
			[control]="control"
			[meta]="meta"
			(call)="handleCallback($event)"
		></ng-container>
	</div>
</ng-template>


<!-- Display validation status if debugging and not nested -->
<div *ngIf="debug && path.length === 0" [ngClass]="{
		'alert-success' 	: formGroup.valid && formGroup.dirty,
		'alert-danger' 		: !formGroup.valid && formGroup.dirty,
		'alert-info' 		: !formGroup.dirty
	}"
	class="alert __debug"
	role="alert">
	<div class="alert-items">
		<pre class="alert-text" style="border: none;">{{ formGroup.pristine ? 'Untouched' : getValidationErrors() | json }}</pre>
	</div>
</div>