Unbreaking stuff

src/app/_mock/testfields.v1.ts

@@ -141,21 +141,19 @@ const container = new fmd.Container({
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export const formMetaDataObj = {
+export const meta = {
 	basicTextField,
-	// styledTextField,
-	// textareaField,
-	// passwordField,
-	// selectField,
-	// radioField,
-	// disabledTextField,
-	// radioFieldHorizontal,
+	styledTextField,
+	textareaField,
+	passwordField,
+	selectField,
+	radioField,
+	disabledTextField,
+	radioFieldHorizontal,
 	checkbutton,
-	// dropdownModifiedInput,
-	// checkbuttonGroup,
-	// timepicker,
-	// datepicker,
-	container
+	dropdownModifiedInput,
+	checkbuttonGroup,
+	timepicker,
+	datepicker,
+	// container
 };
-
-console.log(formMetaDataObj);

src/app/_mock/testfields.v2.ts

@@ -7,14 +7,14 @@ import { ValueTransformer } from './../dynaform/interfaces';
 
 const basicTextField = {
 	name: 'basicTextField',
-	type: 'text',
+	type: 'Text',
 	label: 'Field One',
 	placeholder: 'Type a value here'
 };
 
 const styledTextField = {
 	name: 'styledTextField',
-	type: 'text',
+	type: 'Text',
 	placeholder: 'With a DOM id and CSS classes applied',
 	class: ['red', 'bgPaleBlue'],
 	id: 'yoyo'
@@ -22,19 +22,19 @@ const styledTextField = {
 
 const textareaField = {
 	name: 'textareaField',
-	type: 'textarea',
+	type: 'Textarea',
 	placeholder: 'Type your long-winded comments here'
 };
 
 const passwordField = {
 	name: 'passwordField',
-	type: 'password',
+	type: 'Password',
 	placeholder: 'It\'s a secret'
 };
 
 const selectField = {
 	name: 'selectField',
-	type: 'select',
+	type: 'Select',
 	options: ['', 'Apples', 'Oranges', 'Pears', 'Gorgonzola']
 };
 
@@ -46,7 +46,7 @@ const radioField = {
 
 const disabledTextField = {
 	name: 'disabledTextField',
-	type: 'text',
+	type: 'Text',
 	placeholder: 'You can\'t touch this',
 	isDisabled: true
 };
@@ -154,7 +154,7 @@ const container = {
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-const metadata = {
+const meta = {
 	basicTextField,
 	styledTextField,
 	textareaField,
@@ -171,6 +171,4 @@ const metadata = {
 	container
 };
 
-export const formMetaDataObj = metadata;
-
-console.log(formMetaDataObj);
+export { meta };

src/app/app.component.html

@@ -3,17 +3,18 @@
 		<div class="col-12 pt-4 pb-2">
 			<h1>NgDynaform</h1>
 			<p>
-			Dynamic Form Layout Module
+			Dynamic Form Layout Module<br>
+			<b>NOTE: Model set to update on change, but can be set to blur or submit for greater efficiency.</b>
 			</p>
 		</div>
 	</div>
 	<form [formGroup]="form">
-		<span formGroupName="dynaformtest">
-			<span formGroupName="d">
+		<!-- <span formGroupName="dynaformtest">
+			<span formGroupName="d"> -->
 				<app-dynaform [formGroup]="form" [meta]="meta" [template]="tref" debug="1"></app-dynaform>
 				<!-- <app-dynaform formGroupName="g" [meta]="meta" [template]="tref"></app-dynaform> -->
-			</span>
-		</span>
+			<!-- </span>
+		</span> -->
 	</form>
 	<div calss="row">
 		<div class="col-12 pt-4 pb-4">

src/app/app.component.ts

@@ -2,7 +2,9 @@ import { Component, OnInit, OnChanges, ViewChild, TemplateRef } from '@angular/c
 import { FormGroup } from '@angular/forms';
 import { DynaformService } from './dynaform/services/dynaform.service';
 
-import { model, meta as lazyMeta } from './_mock/testfields.v6';
+import * as test2 from './_mock/testfields.v2';
+import * as test5 from './_mock/testfields.v5';
+import * as test6 from './_mock/testfields.v6';
 
 @Component({
 	selector: 'app-root',
@@ -23,9 +25,35 @@ export class AppComponent implements OnInit, OnChanges {
 	}
 
 	ngOnInit() {
-		({ form: this.form, meta: this.meta } = this.dynaform.build(model, lazyMeta));
+
+		const testcase: number = 5;
+
+		console.log('%c *** TEST DATA *** ', 'color: white; background-color: green; font-weight: bold;');
+		switch (testcase) {
+			case 1:
+				break;
+			case 2:
+				// Test 2 - Build a FormGroup form metadata
+				console.log(test2);
+				this.form = this.dynaform.buildFormGroup(test2.meta);
+				this.meta = test2.meta;
+				break;
+			case 5:
+				// Test 5 - Deeply nested FormGroups
+				console.log(test5);
+				({ form: this.form, meta: this.meta } = this.dynaform.build(test5.model, test5.meta));
+				break;
+			case 6:
+				// Test 6 - Validation
+				console.log(test6);
+				({ form: this.form, meta: this.meta } = this.dynaform.build(test6.model, test6.meta));
+				break;
+		}
+		console.log('%c *** FormGroup *** ', 'color: white; background-color: green; font-weight: bold;');
 		console.dir(this.form);
+		console.log('%c *** MetaData *** ', 'color: white; background-color: green; font-weight: bold;');
 		console.dir(this.meta);
+		console.log('*******************************');
 	}
 
 	ngOnChanges() {

src/app/dynaform/components/_abstract/custom-input.component.ts

@@ -11,6 +11,8 @@ export abstract class CustomInputComponent extends NativeInputComponent implemen
 		this.propagateChange = fn;
 	}
 
-	public registerOnTouched(fn: any): void {}
+	public registerOnTouched(fn: any): void {
+		// this.propagateChange = fn;
+	}
 
 }

src/app/dynaform/components/group/checkbutton-group/checkbutton-group.component.ts

@@ -27,16 +27,16 @@ export class CheckbuttonGroupComponent extends GroupInputComponent implements On
 			this.firstControl = this.formGroup.controls[this.controlNames[0]] as FormControl;
 			this.childMeta[0].isDisabled = false;
 			this.childMeta.slice(1).map(meta => { meta.isDisabled = !this.firstControl.value; return meta; });
-			
+
 			// Observe value changes on first control
 			this.firstControl.valueChanges.subscribe(val => {
-				for (var i = 1; i < this.childMeta.length; i++) {
+				for (let i = 1; i < this.childMeta.length; i++) {
 					// NOTE: We rassign the input (array member) to trigger change detection (otherwise it doesn't run)
 					// See https://juristr.com/blog/2016/04/angular2-change-detection/
-					this.childMeta[i] = { 
+					this.childMeta[i] = {
 						...this.childMeta[1],
 						isDisabled: !val
-					}
+					};
 				}
 			});
 		}

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

@@ -18,6 +18,9 @@ interface FFC {
 }
 type FFCCustom = FFC & ControlValueAccessor;
 
+// Generate component name given type
+const componentType = (type: string): string => type[0].toUpperCase() + type.slice(1) + 'Component';
+
 @Directive({
 	// tslint:disable-next-line:directive-selector
 	selector: '[dynafield]'
@@ -53,7 +56,7 @@ export class DynafieldDirective extends NgControl implements OnInit, OnDestroy {
 	}
 
 	ngOnInit() {
-		const type = `${this.meta.type}Component`;
+		const type = componentType(this.meta.type);
 		if (!formFieldComponents[type]) {
 			const validComponentTypes = Object.keys(formFieldComponents).join(', ');
 			throw new Error(

src/app/dynaform/dynaform.component.ts

@@ -49,8 +49,8 @@ export class DynaformComponent implements OnInit {
 	template?: TemplateRef<any>;
 
 	@Input()
-	debug? = false;
-	
+	debug = false;
+
 	@Output()
 	dynaval = new EventEmitter();
 

src/app/dynaform/models/index.ts

@@ -98,6 +98,7 @@ abstract class OptionsField extends SimpleField {
 		if (Array.isArray(meta.options)) {
 			this.options = meta.options.reduce((acc, opt) => { acc.push(new Option(opt)); return acc; }, []);
 		} else {
+			console.log('THIS IS RUNNING');
 			this.options = [
 				new Option({ label: 'Yes', value: true }),
 				new Option({ label: 'No', value: false })

src/app/dynaform/services/dynaform.service.ts

@@ -49,7 +49,7 @@ export interface FormAndMeta {
 @Injectable()
 export class DynaformService {
 
-	protected buildFormGroup: (meta) => FormGroup;
+	public buildFormGroup: (meta) => FormGroup;
 
 	constructor(private fb: FormBuilder) {
 		this.buildFormGroup = buildFormGroupFunctionFactory(fb);

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

@@ -74,6 +74,7 @@ const combineModelWithMeta = (model, extraMeta) => combineExtraMeta(autoMeta(mod
 
 const buildFieldClassName = (t = 'text') => {
 	const start = t[0].toUpperCase() + t.slice(1);
+	console.log(start);
 	if (start === 'Container' || t.slice(-5) === 'Group') {
 		return start;
 	}
@@ -117,7 +118,7 @@ const buildFormGroupFunctionFactory = (fb: FormBuilder): (meta) => FormGroup =>
 	const buildValidators = (metaF): AbstractControlOptions => ({
 		validators: metaF.validators,
 		asyncValidators: metaF.asyncValidators,
-		updateOn: 'blur'
+		updateOn: 'change' // blur not working for custom components - maybe use change for custom and blur for text
 	});
 	const buildFormControl = metaF => new FormControl(buildControlState(metaF), buildValidators(metaF));