Starting on refactoring dynaform renderer

src/app/dynaform/directives/dynafield.directive.ts

@@ -62,6 +62,7 @@ export class DynafieldDirective extends NgControl implements OnInit, OnDestroy {
 	}
 
 	ngOnInit() {
+		console.log(this.meta);
 		const type = componentType(this.meta.type);
 		if (!formFieldComponents[type]) {
 			const validComponentTypes = Object.keys(formFieldComponents).join(', ');

src/app/dynaform/dynaform.component.OLD.html

@@ -0,0 +1,54 @@
+<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 #default let-control="control" let-meta="meta">
+		<ng-container *ngIf="meta.type !== 'Hidden'">
+	
+			<ng-container *ngIf="!meta.noLabel; else fullWidth">
+	
+				<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
+					<label class="col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
+						{{ meta.rowLabel !== mull ? 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 #recursiveDynaform>
+					<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-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>
+	

src/app/dynaform/dynaform.component.html

@@ -5,30 +5,41 @@
 
 <!-- Default template for form field
      used when a TemplateRef is NOT supplied to component -->
-<ng-template #default let-control="control" let-meta="meta">
+<ng-template let-control="control" let-meta="meta" #default>
 	<ng-container *ngIf="meta.type !== 'Hidden'">
 
 		<ng-container *ngIf="!meta.noLabel; else fullWidth">
 
-			<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
-				<label class="col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
-					{{ meta.rowLabel !== mull ? 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 #recursiveDynaform>
+			<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>

src/app/dynaform/dynaform.component.ts

@@ -130,6 +130,18 @@ export class DynaformComponent implements OnInit {
 		};
 	}
 
+	isField(meta: StringMap): boolean {
+		return !meta.type.includes('Container');
+	}
+	
+	isContainer(meta: StringMap): boolean {
+		return meta.type === 'Container';
+	}
+
+	isRepeatingContainer(meta: StringMap): boolean {
+		return meta.type === 'RepeatingContainer';
+	}
+
 	getRowClass(control: FormControl, meta: StringMap): string {
 		const fieldTypeClass = meta.type ? meta.type.toLowerCase().replace('component', '') : '';
 		const fieldClass = Array.isArray(meta.class) ? meta.class.join(' ') : meta.class;

src/app/dynaform/services/_formdata-utils.ts

@@ -321,12 +321,10 @@ const buildFormGroupFunctionFactory = (fb: FormBuilder): (meta) => FormGroup =>
 	});
 	const buildFormControl = metaF => new FormControl(buildControlState(metaF), buildValidators(metaF));
 
-	// Build Form Array
+	// Build Form Array containing either Form Controls or Form Groups
 	const buildFormArray = (metaG): FormArray => {
 		return fb.array(
-			metaG.map(
-				metaFoRCMem => isRepeatingContainerMember(metaFoRCMem) ? _buildFormGroup(metaFoRCMem) : buildFormControl(metaFoRCMem)
-			)
+			metaG.map(m => isRepeatingContainerMember(m) ? _buildFormGroup(m) : buildFormControl(m))
 		);
 	};