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 field
     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">

			<ng-template *ngIf="isContainer(meta)">
				<div *ngIf="meta.label" class="row">
					<h3 class="col-sm-12 h-dyna" [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 *ngIf="isRepeatingContainer(meta)">
				<div *ngFor="let group of meta.meta">
					<div *ngIf="group.label" class="row">
						<h3 class="col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
					</div>
					<app-dynaform [formGroup]="control" [meta]="group.meta" [template]="template" (call)="handleCallback($event)"></app-dynaform>
				</div>
			</ng-template>

			<ng-template *ngIf="isField(meta)">
				<div class="form-group row" [ngClass]="getRowClass(control, meta)">
					<label class="col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
						{{ meta.rowLabel !== null ? meta.rowLabel : meta.label }}
						<span *ngIf="control && control.touched && control.invalid" class="fas fa-exclamation-triangle"
							[ngbTooltip]="getValidationFailureMessage(control, meta)"
						></span>
					</label>
					<div class="col-sm-8">
						<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
					</div>
				</div>
			</ng-template>
			
		</ng-container>

		<ng-template #fullWidth>
			<div class="row" [ngClass]="getRowClass(control, meta.type)">
				<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
			</div>
		</ng-template>
		
	</ng-container>
</ng-template>


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