Progress on custom groups, and moving NG_VALUE_ACCESSOR

src/app/_mock/testfields.ts

@@ -101,23 +101,40 @@ const checkbuttonGroup = new fmd.CheckbuttonGroup({
 	meta: [{name: 'iMaskTheOthers'}, {name: 'groupMemberTwo'}, {name: 'groupMemberThree'}]
 });
 
+
+const checkbuttonSA = new fmd.CheckbuttonField({
+	name: 'checkbuttonSA',
+	value: '456'
+});
+
+
+const checkbuttonGroupSA = new fmd.CheckbuttonGroup({
+	name: 'checkbuttonGroupSA',
+	meta: [{name: 'iMaskTheOthers'}, {name: 'groupMemberTwo'}, {name: 'groupMemberThree'}]
+});
+
 // ---------------------------------------------------------------------------------------------------------------------
 // Kendo
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const formMetaDataObj = {
-	basicTextField,
-	styledTextField,
-	textareaField,
-	passwordField,
-	selectField,
-	radioField,
-	disabledTextField,
-	radioFieldHorizontal,
-	checkbutton,
-	dropDownModifiedInput,
+	// basicTextField,
+	// styledTextField,
+	// textareaField,
+	// passwordField,
+	// selectField,
+	// radioField,
+	// disabledTextField,
+	// radioFieldHorizontal,
+	// checkbutton,
+	// dropDownModifiedInput,
 	checkbuttonGroup
 };
 
-console.dir(formMetaDataObj);
+export const standAlone = {
+	checkbuttonSA,
+	checkbuttonGroupSA
+}
+
+console.log(standAlone);

src/app/app.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="form">
-	<div class="container">
+	<div class="container mb-4">
 		<div class="row">
 			<div class="col-12 pt-4 pb-2">
 				<h1>NgDynaform</h1>
@@ -8,9 +8,15 @@
 				</p>
 			</div>
 		</div>
-		<app-dynaform formGroupName="dynaformtest" [meta]="formMetaDataObj" [template]="tref"></app-dynaform>
+		<!-- <app-dynaform formGroupName="dynaformtest" [meta]="formMetaDataObj" [template]="tref"></app-dynaform> -->
+		<div class="row">
+			<div class="col-12 pt-4 pb-4" formGroupName="standAlone">
+				<!-- <app-checkbutton [formControl]="tempctl" [meta]="standAlone.checkbuttonSA"></app-checkbutton> -->
+				<app-checkbutton-group formGroupName="checkbuttonGroupSA" [control]="tempgrp" [meta]="standAlone.checkbuttonGroupSA" firstEnablesRest></app-checkbutton-group>
+			</div>
+		</div>
 		<div calss="row">
-			<div class="col-12 pt-4">
+			<div class="col-12 pt-4 pb-4">
 				<json-formatter [data]="form.value" open="3"></json-formatter>
 			</div>
 		</div>

src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { buildFormGroup } from './dynaform/libs';
 
-import { formMetaDataObj } from './_mock/testfields';
+import { formMetaDataObj, standAlone } from './_mock/testfields';
 
 @Component({
 	selector: 'app-root',
@@ -14,10 +14,14 @@ export class AppComponent implements OnInit {
 	form: FormGroup;
 
 	formMetaDataObj = formMetaDataObj;
+	standAlone = standAlone;
 
 	@ViewChild('testTemplate', { read: TemplateRef })
 	private tref: TemplateRef<any>;
 
+	tempctl;
+	tempgrp;
+
 	constructor(
 		protected fb: FormBuilder
 	) {
@@ -28,7 +32,11 @@ export class AppComponent implements OnInit {
 			dynaformtest: { meta: this.formMetaDataObj }
 		};
 		this.form = buildFormGroup(fullFormMeta);
-		console.log(this.form);
+		this.form.addControl('standAlone', buildFormGroup(standAlone));
+		this.tempctl = (<FormGroup>this.form.controls.standAlone).controls.checkbuttonSA;
+		this.tempgrp = (<FormGroup>this.form.controls.standAlone).controls.checkbuttonGroupSA;
+		console.log(standAlone);
+		console.log(this.tempgrp);
 	}
 }
 

src/app/app.module.ts

@@ -1,9 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DynaformModule } from './dynaform/dynaform.module';
+// import { DynaformModule } from './dynaform/dynaform.module';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { AppComponent } from './app.component';
+import { CheckbuttonGroupComponent } from './dynaform/components/group/checkbutton-group/checkbutton-group.component';
+import { CheckbuttonComponent } from './dynaform/components/custom/checkbutton/checkbutton.component';
 import { JsonFormatterDirective } from './directives/json-formatter.directive';
 
 @NgModule({
@@ -11,11 +13,13 @@ import { JsonFormatterDirective } from './directives/json-formatter.directive';
 		BrowserModule,
 		FormsModule,
 		ReactiveFormsModule,
-		DynaformModule,
+		// DynaformModule,
 		NgbModule.forRoot()
 	],
 	declarations: [
 		AppComponent,
+		CheckbuttonGroupComponent,
+		CheckbuttonComponent,
 		JsonFormatterDirective
 	],
 	providers: [],

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

@@ -1,16 +1,6 @@
-import { Component, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor } from '@angular/forms';
 import { NativeInputComponent } from './native-input.component';
 
-@Component({
-	providers: [
-		{
-			provide: NG_VALUE_ACCESSOR,
-			useExisting: forwardRef(() => CustomInputComponent),
-			multi: true
-		}
-	]
-})
 export abstract class CustomInputComponent extends NativeInputComponent implements ControlValueAccessor {
 
 	propagateChange = (_: any) => {};

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

@@ -1,5 +1,5 @@
 import { Input, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 
 export abstract class NativeInputComponent implements OnInit {
 

src/app/dynaform/components/custom/checkbutton-group/checkbutton-group.component.html

@@ -1,7 +0,0 @@
-<div class="lmp-checkbutton-group btn-group btn-group-toggle" [formGroup]="cc.control">
-	<app-checkbutton *ngFor="let control of controls; let i = index"
-		[control]="control"
-		[meta]="meta[i]"
-	>
-	</app-checkbutton>
-</div>

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

@@ -1,52 +0,0 @@
-import { Component, Attribute, OnInit, Input } from '@angular/core';
-import { /* ControlContainer, */ FormGroup, FormControl } from '@angular/forms';
-
-@Component({
-	selector: 'app-checkbutton-group',
-	templateUrl: './checkbutton-group.component.html',
-	styleUrls: ['./checkbutton-group.component.scss']
-})
-export class CheckbuttonGroupComponent implements OnInit {
-
-	@Input()
-	control: FormGroup;
-
-	@Input()
-	meta: StringMap;
-
-	controlNames: Array<string>;
-	isDisabled: Array<boolean>;
-	extraClass: string;
-
-	firstControl: FormControl;
-
-	constructor(
-		/* private cc: ControlContainer */,
-		@Attribute('firstEnablesRest') private firstEnablesRest
-	) {
-		this.firstEnablesRest = firstEnablesRest === ''; // True if 'firstEnablesRest' exists as component attribute
-	}
-
-	ngOnInit() {
-		this.controlNames = Object.keys(this.cc.control);
-		console.log('HERE I AM', this.control, this.meta.name);
-		console.log(this.controlNames);
-		/*
-		const labelShortfall = this.controlNames.length - this.labels.length;
-		if (labelShortfall > 0) {
-			this.labels = [ ...this.labels, ...Array(labelShortfall).fill('LABEL MISSING') ];
-		}
-		*/
-		if (this.firstEnablesRest) {
-			this.firstControl = (<FormGroup>this.cc.control).controls[this.controlNames[0]] as FormControl;
-			this.isDisabled = [false, ...Array(this.controlNames.length - 1).fill(!this.firstControl.value)];
-			// Observe value changes on first control
-			this.firstControl.valueChanges.subscribe(val => {
-				this.isDisabled = [false, ...Array(this.controlNames.length - 1).fill(!val)];
-			});
-		} else {
-			this.isDisabled = Array(this.controlNames.length).fill(false);
-		}
-	}
-
-}

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

@@ -1,20 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, forwardRef, OnChanges, Input } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CustomInputComponent } from './../../_abstract/custom-input.component';
 
 @Component({
 	selector: 'app-checkbutton',
 	templateUrl: './checkbutton.component.html',
 	styleUrls: ['./checkbutton.component.scss'],
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => CheckbuttonComponent),
+			multi: true
+		}
+	]
 })
-export class CheckbuttonComponent extends CustomInputComponent {
-
+export class CheckbuttonComponent extends CustomInputComponent implements OnChanges {
+	
+	@Input()
+	test;
+	
 	exposeMetaInTemplate: string[] = ['label', 'value', 'isDisabled'];
 
-	value: string | boolean = true;
-	isDisabled = false;
 	isChecked: boolean;
+	isDisabled = false;
+	value?: string | boolean = true;
 	currentValue: string | boolean;
 
+	ngOnChanges() {
+		console.log('HERE');
+		this.isDisabled = this.meta.isDisabled;
+	}
+
 	private toggleChecked(e): void {
 		e.target.blur();
 		e.preventDefault();
@@ -28,5 +44,4 @@ export class CheckbuttonComponent extends CustomInputComponent {
 		this.isChecked = value && value !== 0 && value !== 'false' ? value : false;
 		this.currentValue = this.isChecked ? value : false;
 	}
-
 }

src/app/dynaform/components/custom/dropdown-modified-input/dropdown-modified-input.component.ts

@@ -1,11 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CustomInputComponent } from './../../_abstract/custom-input.component';
 import { ValueTransformer }	from './../../../interfaces';
 
 @Component({
 	selector: 'app-dropdown-modified-input',
 	templateUrl: 'dropdown-modified-input.component.html',
-	styles: []
+	styles: [],
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => DropdownModifiedInputComponent),
+			multi: true
+		}
+	]
 })
 export class DropdownModifiedInputComponent extends CustomInputComponent implements OnInit {
 

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

@@ -0,0 +1,7 @@
+<div class="lmp-checkbutton-group btn-group btn-group-toggle" [formGroup]="cc.control">
+	<app-checkbutton *ngFor="let groupMember of controlNames; let i = index"
+		[formControlName]="groupMember"
+		[meta]="childMeta[i]"
+	>
+	</app-checkbutton>
+</div>

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

@@ -0,0 +1,59 @@
+import { Component, Attribute, OnInit, Input } from '@angular/core';
+import { ControlContainer, FormGroup, FormControl } from '@angular/forms';
+import { CustomInputComponent } from './../../_abstract/custom-input.component';
+
+@Component({
+	selector: 'app-checkbutton-group',
+	templateUrl: './checkbutton-group.component.html',
+	styleUrls: ['./checkbutton-group.component.scss']
+})
+export class CheckbuttonGroupComponent /* extends CustomInputComponent */ implements OnInit {
+
+	@Input()
+	control: FormGroup;
+
+	@Input()
+	meta;
+
+	formGroup: FormGroup;
+	firstControl: FormControl;
+	childMeta: Array<StringMap>;
+	controlNames: Array<string>;
+
+	constructor(
+		private cc: ControlContainer,
+		@Attribute('firstEnablesRest') private firstEnablesRest
+	) {
+		// super();
+		this.firstEnablesRest = firstEnablesRest === ''; // True if 'firstEnablesRest' exists as component attribute
+		console.log('firstEnablesRest', this.firstEnablesRest);
+	}
+
+	ngOnInit() {
+		console.log('************************');
+		this.formGroup = this.control as FormGroup;
+		// this.formGroup = this.cc.control as FormGroup;
+		this.childMeta = Object.values(this.meta.meta); // Metadata array or all controls in group
+		console.log(Array.isArray(this.childMeta));
+		this.controlNames = Object.keys(this.formGroup.controls);
+		// this.controlNames = Object.keys(this.cc.control.value);
+		console.log(this.controlNames);
+		if (this.firstEnablesRest) {
+			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++) {
+					// NOTE: We rassign input to trigger change detection
+					this.childMeta[i] = { 
+						...this.childMeta[1],
+						isDisabled: !val
+					}
+				}
+			});
+		}
+	}
+
+}

src/app/dynaform/components/index.ts

@@ -8,5 +8,5 @@ export { SelectComponent } from './native/select/select.component';
 export { RadioComponent } from './native/radio/radio.component';
 export { DropdownModifiedInputComponent } from './custom/dropdown-modified-input/dropdown-modified-input.component';
 export { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component';
-export { CheckbuttonGroupComponent } from './custom/checkbutton-group/checkbutton-group.component';
+export { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.component';
 

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

@@ -2,7 +2,7 @@ import {
 	Directive, ComponentFactoryResolver, ComponentRef, ViewContainerRef,
 	Input, Output, EventEmitter, OnInit, SkipSelf
 } from '@angular/core';
-import { Form, FormControl, ControlContainer, NgControl, ControlValueAccessor, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
+import { Form, FormControl, ControlContainer, NgControl, ControlValueAccessor, ValidatorFn, AsyncValidatorFn, FormGroupName } from '@angular/forms';
 
 import * as formFieldComponents from './../components';
 
@@ -56,6 +56,7 @@ export class DynafieldDirective extends NgControl implements OnInit /* OnChanges
 			);
 		}
 		try {
+			
 			const { name, class: cssClass, id: cssId, isDisabled } = this.meta;
 
 			// Create the component
@@ -88,6 +89,18 @@ export class DynafieldDirective extends NgControl implements OnInit /* OnChanges
 				this.valueAccessor = <FFCCustom>this.component.instance;
 				this._control = this.formDirective.addControl(this);
 			}
+
+			// Connect custom groups
+			if (this.meta.meta) {
+				console.log('GROUP');
+				// this.name = name;
+				console.log(this.formDirective);
+				const whagga = new FormGroupName(this.cc, [], []);
+				whagga.name = 'checkbuttonGroup';
+				this.formDirective.addFormGroup(whagga);
+				console.log(this.formDirective);
+			}
+
 		} catch (e) {
 			console.error('ERROR INSTANTIATING DYNAFORM FIELD COMPONENT');
 			console.log(e);

src/app/dynaform/models/index.ts

@@ -145,7 +145,7 @@ class CheckbuttonGroup {
 	name: string;
 	label?: string;
 	groupName: string;
-	firstEnablesRest;
+	firstEnablesRest?;
 	meta: CheckbuttonField[];
 	constructor(groupmeta: any) {
 		Object.assign(this, groupmeta);

src/app/ng-dynaform.code-workspace

@@ -0,0 +1,13 @@
+{
+	"folders": [
+		{
+			"path": "/Users/rk/play/ng-dynaform"
+		},
+		{
+			"path": "."
+		},
+		{
+			"path": "dynaform"
+		}
+	]
+}

src/ng-dynaform.code-workspace

@@ -0,0 +1,13 @@
+{
+	"folders": [
+		{
+			"path": "app"
+		},
+		{
+			"path": "app/dynaform"
+		},
+		{
+			"path": "/Users/rk/play/ng-dynaform"
+		}
+	]
+}