Working - AT LAST

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

@@ -12,6 +12,7 @@
 		</div>
 		<div class="col-sm-8">
 			<!-- <input type="text" [formControl]="control" class="form-control form-control-sm"> -->
+			<!-- <app-checkbutton [formControl]="control" [meta]="meta"></app-checkbutton> -->
 			<ng-container dynafield [control]="control" [meta]="meta"></ng-container>
 		</div>
 	</div>

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

@@ -9,4 +9,4 @@
 	>
 	<span class="k-icon" [ngClass]="{ 'k-i-check': isChecked, 'k-i-x': !isChecked }"></span>
 	{{ label }}
-</a>
+</a>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
 	selector: 'app-checkbutton',
@@ -11,30 +11,30 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 			useExisting: forwardRef(() => CheckbuttonComponent),
 			multi: true
 		}
-	]
+	],
+	host: {
+		'class' : 'red'
+	}
 })
 export class CheckbuttonComponent implements OnInit, ControlValueAccessor {
 
 	@Input()
-	label?: string;
-
-	@Input()
-	value?: string | boolean = true;
+	control: FormControl;
 
 	@Input()
-	isDisabled?: boolean = false;
-	
-	@Input()
-	meta = {};
+	meta: StringMap = {};
 
+	label: string = '';
+	value: string | boolean = true;
+	isDisabled: boolean = false;
 	isChecked: boolean;
 	currentValue: string | boolean;
 
 	propagateChange = (_: any) => {};
 
 	ngOnInit() {
-		// meta input overrides other inputs if provided
-		['label', 'value', 'isDisabled'].map(p => this[p] = this.meta[p] || this[p]);
+		// Move meta variables up a level, for direct access in templates
+		['label', 'value', 'isDisabled'].map(p => this[p] = this.meta[p]);
 	}
 	
 	private toggleChecked(e): void {
@@ -49,6 +49,7 @@ export class CheckbuttonComponent implements OnInit, ControlValueAccessor {
 	public writeValue(value: any): void {
 		this.isChecked = value && value !== 0 && value !== 'false' ? value : false;
 		this.currentValue = this.isChecked ? value : false;
+		console.log(this.currentValue ); 
 	}
 
 	public registerOnChange(fn: any): void {

src/app/dynaform/components/fields/index.ts

@@ -2,7 +2,7 @@
 // See https://basarat.gitbooks.io/typescript/docs/tips/barrel.html
 
 export { BasicinputComponent } from './basicinput/basicinput.component';
-export { DropdownModifiedInputComponent } from './dropdown-modified-input/dropdown-modified-input.component';
+// export { DropdownModifiedInputComponent } from './dropdown-modified-input/dropdown-modified-input.component';
 export { CheckbuttonComponent } from './checkbutton/checkbutton.component';
-export { CheckbuttonGroupComponent } from './checkbutton-group/checkbutton-group.component';
+// export { CheckbuttonGroupComponent } from './checkbutton-group/checkbutton-group.component';
 

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

@@ -1,13 +1,17 @@
-import { ComponentFactoryResolver, ComponentRef, Directive, Input, OnChanges, OnInit, Type, ViewContainerRef } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import {
+	Directive, ComponentFactoryResolver, ComponentRef, ViewContainerRef,
+	Input, Output, EventEmitter, OnInit
+	SkipSelf
+} from '@angular/core';
+import { FormControl, ControlContainer, NgControl, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
 
 import * as formFieldComponents from './../components/fields';
 
 @Directive({
 	// tslint:disable-next-line:directive-selector
-	selector: '[dynafield]'
+	selector: '[dynafield]',
 })
-export class DynafieldDirective implements OnInit, OnChanges {
+export class DynafieldDirective extends NgControl implements OnInit /* OnChanges */ {
 
 	@Input()
 	control: FormControl;
@@ -15,12 +19,20 @@ export class DynafieldDirective implements OnInit, OnChanges {
 	@Input()
 	meta: StringMap;
 
+	@Output('ngModelChange')
+	update = new EventEmitter();
+
 	component: ComponentRef<any>; // TODO: Tighten up on 'any'
 
+    _control: FormControl;
+
 	constructor(
 		private resolver: ComponentFactoryResolver,
-		private container: ViewContainerRef
-	) {}
+		private container: ViewContainerRef,
+		@SkipSelf() private cc: ControlContainer
+	) {
+		super();
+	}
 
 	ngOnInit() {
 		const type = `${this.meta.type}Component`;
@@ -31,21 +43,50 @@ export class DynafieldDirective implements OnInit, OnChanges {
 			 	 Supported types: ${validComponentTypes}`
 			);
 		}
-		const component = this.resolver.resolveComponentFactory<any>(formFieldComponents[type]);
-		this.component = this.container.createComponent(component);
-		this.component.instance.control = this.control;
-		this.component.instance.meta = this.meta;
-
-		// Now move meta variables up a level, for direct access in templates implementing dynaField
-		Object.keys(this.meta).map(p => this[p] = this.meta[p]);
+		try {
+			this.name = this.meta.name;
+			const component = this.resolver.resolveComponentFactory<any>(formFieldComponents[type]);
+			this.component = this.container.createComponent(component);
+			this.component.instance.control = this.control;
+			this.component.instance.meta = this.meta;
+			if (this.component.instance.propagateChange) {
+				// We're dealing with a custom form control that implements the ControlValueAccessor interface,
+				// so we need to wire it up
+				this.valueAccessor = this.component.instance;
+				this._control = this.formDirective.addControl(this);
+			}
+		} catch(e) {
+			console.error('ERROR INSTANTIATING DYNAFORM FIELD COMPONENT')
+			console.log(e);
+		}
 	}
 
+	/*
 	ngOnChanges() {
 		if (this.component) {
 			this.component.instance.meta = this.meta;
 			this.component.instance.control = this.control;
 		}
 	}
+	*/
+
+    get path(): string[] {
+        return [...this.cc.path !, this.name];
+    }
+
+    get formDirective(): any { 
+		return this.cc ? this.cc.formDirective : null;
+	}
+
+    // get control(): FormControl { return this._control; }
+
+    get validator(): ValidatorFn | null { return null; }
+
+    get asyncValidator(): AsyncValidatorFn { return null; }
+
+	viewToModelUpdate(newValue: any): void {
+        this.update.emit(newValue);
+    }
 
 }
 

src/styles.scss

@@ -9,4 +9,8 @@ h1 {
 div.col-sm-4 {
 	background-color: lavenderblush;
 	border-top: 3px white solid;
+}
+
+.red { 
+	color: red !important;
 }