:q@q

 w with configurable row templates, by passin

ith '#' will be ignored, and an empty message aborts the commit.
i#

src/app/app.component.html

@@ -8,6 +8,18 @@
        </p>
       </div>
     </div>
-      <app-dynaform formGroupName="dynaformtest" [meta]="formMetaDataObj"></app-dynaform>
+      <app-dynaform formGroupName="dynaformtest" [meta]="formMetaDataObj" [template]="tref"></app-dynaform>
   </div>
 </form>
+
+
+
+<ng-template #testTemplate let-control="control" let-meta="meta">
+    <h3 style="color: blue;"><small>controlName is </small>{{ meta.name }}</h3>
+    <p>{{ meta | json }}</p>
+    <hr>
+</ng-template>
+  
+  
+  
+  

src/app/dynaform/components/dynaform/dynaform.component.html

@@ -1,2 +1,15 @@
 <h2>I am DynaformComponent</h2>
 
+<ng-container *ngFor="let controlName of controlNames">
+	<ng-container *ngTemplateOutlet="template ? template : default; context: getTemplateContext(controlName)"></ng-container>
+</ng-container>
+
+
+<ng-template #default let-control="control" let-meta="meta">
+	<h3 style="color: red;"><small>controlName is </small>{{ meta.name }}</h3>
+	<p>{{ meta | json }}</p>
+	<hr>
+</ng-template>
+
+
+

src/app/dynaform/components/dynaform/dynaform.component.ts

@@ -1,23 +1,36 @@
-import { Component, Input, Optional, OnInit } from '@angular/core';
-import { FormGroup, FormGroupName, ControlContainer } from '@angular/forms';
-import { KeysPipe } from '@pipes/keys.pipe';
+import { Component, Input, ViewChild, TemplateRef, Optional, OnInit } from '@angular/core';
+import { FormGroup, FormGroupName, AbstractControl, ControlContainer } from '@angular/forms';
+// import { KeysPipe } from '@pipes/keys.pipe';
+
+export interface DynarowContext {
+	control: AbstractControl;
+	meta: StringMap;
+}
 
 @Component({
 	selector: 'app-dynaform',
 	templateUrl: './dynaform.component.html',
 	styleUrls: ['./dynaform.component.scss'],
-	providers: [ KeysPipe ]
+	// providers: [ KeysPipe ]
 })
 export class DynaformComponent implements OnInit {
 
 	/*
-	 * USAGE
-	 * Supply with either a FormGroup or the (string) name of a FormGroup, and the form meta data
+	 * DynaformComponent: <app-dynaform>
+	 *
+	 * USAGE:
+	 *
+	 * Supply component with either a FormGroup or the name of a FormGroup,
+	 * the group's meta data,
+	 * and, optionally, a TemplateRef used as a field row template (overrides the default template)
+	 *
 	 * e.g.
 	 * <app-dynaform [formGroup]="myForm" [meta]="myFormMetaData"></app-dynaform>
 	 * <app-dynaform formGroupName="myFormGroupName" [meta]="myFormMetaData"></app-dynaform>
+	 * <app-dynaform [formGroup]="myForm" [meta]="myFormMetaData" [template]="myFieldTemplate"></app-dynaform>
 	 *
 	 * If supplied with just a FormGroupName it will retieve the FormGroup from the injected ControlContainer
+	 *
 	 */
 
 	@Input()
@@ -31,29 +44,35 @@ export class DynaformComponent implements OnInit {
 		this.formMetaData = data;
 	}
 
+	@Input()
+	template?: TemplateRef<any>;
+
 	formMetaData: any; // TODO: Tighten up type
-	controlNames: Array<string>;
+	controlNames: string[];
+
+	ctx = {ccc: 123};
 
 	constructor(
 		@Optional() private cc: ControlContainer
 	) {}
 
 	ngOnInit() {
-		console.log('Dynaform Component');
-		if (this.formGroup) {
-			console.log('Initailised with FormGroup dirtectly: Controls >');
-			console.log(Object.keys(this.formGroup.controls));
-		}
-		if (this.formGroupName) {
-			console.log('Initailised with FormGroupName:', this.formGroupName);
-			this.formGroup = <FormGroup>this.cc.control; // Get the associated formGroup from the ControlContainer
-			console.log('Loading Controls from ControlContainer >');
-			console.log(Object.keys(this.formGroup.controls));
+		if (!this.formGroup && this.formGroupName) {
+			this.formGroup = <FormGroup>this.cc.control; // Get theFormGroup from the ControlContainer
 		}
 		if (!this.formGroup) {
 			throw new Error('Dynaform Component Initialised without [formGroup] or formGroupName');
 		}
+		this.controlNames = Object.keys(this.formGroup.controls);
+		console.log('Dynaform Component: Controls >');
+		console.log(this.controlNames);
+	}
 
+	getTemplateContext(controlName: string): DynarowContext {
+		return {
+			control: this.formGroup.get(controlName),
+			meta: this.formMetaData[controlName]
+		};
 	}
 
 }