Working on custom Form Groups

src/app/_mock/testfields.ts

@@ -53,8 +53,8 @@ const radioFieldHorizontal = new fmd.RadioField({
 // ---------------------------------------------------------------------------------------------------------------------
 // Custom
 
-const checkButton = new fmd.CheckbuttonField({
-	name: 'checkButton',
+const checkbutton = new fmd.CheckbuttonField({
+	name: 'checkbutton',
 	value: '456'
 });
 
@@ -96,6 +96,11 @@ const dropDownModifiedInput = new fmd.DropdownModifiedInputField({
 	transform: transformerFunctions
 });
 
+const checkbuttonGroup = new fmd.CheckbuttonGroup({
+	name: 'checkbuttonGroup',
+	meta: [{name: 'iMaskTheOthers'}, {name: 'groupMemberTwo'}, {name: 'groupMemberThree'}]
+});
+
 // ---------------------------------------------------------------------------------------------------------------------
 // Kendo
 
@@ -110,8 +115,9 @@ export const formMetaDataObj = {
 	radioField,
 	disabledTextField,
 	radioFieldHorizontal,
-	checkButton,
-	dropDownModifiedInput
+	checkbutton,
+	dropDownModifiedInput,
+	checkbuttonGroup
 };
 
 console.dir(formMetaDataObj);

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { extractFormGroupData } from './dynaform/libs';
+import { extractFormGroupData, buildNestedFormGroup } from './dynaform/libs';
 
 import { formMetaDataObj } from './_mock/testfields';
 
@@ -27,6 +27,8 @@ export class AppComponent implements OnInit {
 		this.form = this.fb.group({
 			dynaformtest: this.fb.group(extractFormGroupData(formMetaDataObj))
 		});
+		console.log('TESTING');
+		console.log(buildNestedFormGroup(formMetaDataObj));
 	}
 }
 

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

@@ -1,8 +1,7 @@
-<div class="lmp-checkbutton-group btn-group btn-group-toggle" [ngClass]="extraClass" [formGroup]="cc.control">
-	<app-checkbutton *ngFor="let control of controlNames; let i = index"
-		[label]="labels[i]"
-		[formControlName]="control"
-		[isDisabled]="isDisabled[i]"
+<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

@@ -9,7 +9,7 @@ import { ControlContainer, FormGroup, FormControl } from '@angular/forms';
 export class CheckbuttonGroupComponent implements OnInit {
 
 	@Input()
-	labels: Array<string>;
+	group: FormGroup;
 
 	@Input()
 	meta = {};
@@ -29,10 +29,13 @@ export class CheckbuttonGroupComponent implements OnInit {
 
 	ngOnInit() {
 		this.controlNames = Object.keys(this.cc.control.value);
+		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)];

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { CustomInputComponent } from './../../_abstract/custom-input.component';
 
 @Component({

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CustomInputComponent } from './../../_abstract/custom-input.component';
 import { ValueTransformer }	from './../../../interfaces';
 
@@ -7,7 +7,7 @@ import { ValueTransformer }	from './../../../interfaces';
 	templateUrl: 'dropdown-modified-input.component.html',
 	styles: []
 })
-export class DropdownModifiedInputComponent extends CustomInputComponent {
+export class DropdownModifiedInputComponent extends CustomInputComponent implements OnInit {
 
 	exposeMetaInTemplate: string[] = ['modifiers', 'transform', 'placeholder'];
 
@@ -20,6 +20,11 @@ export class DropdownModifiedInputComponent extends CustomInputComponent {
 	private displayedValue: string;
 	private _controlValue: string;
 
+	ngOnInit() {
+		super.ngOnInit();
+		this.controlValue = this.control.value;
+	}
+
 	get controlValue(): string {
 		return this._controlValue;
 	}

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 './custom/checkbutton-group/checkbutton-group.component';
 

src/app/dynaform/libs/index.ts

@@ -1,11 +1,24 @@
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { reduce } from 'lodash/fp';
 
 // Utility function for extracting a FormGroup from a form metadata object - currently non-nested only
 const reducerIteree = (res, field) => Object.assign(res, { [field.name]: field.value || '' });
 const _extractFormGroupData = reduce(reducerIteree, {});
-const extractFormGroupData = nonNestedFormMetaLevel => _extractFormGroupData(nonNestedFormMetaLevel);
+const extractFormGroupData = nonNestedFormMetaData => _extractFormGroupData(nonNestedFormMetaData);
+
+// Build Form Group
+const fb = new FormBuilder();
+const buildNonNestedFormGroup = nonNestedFormMetaData => fb.group(extractFormGroupData(nonNestedFormMetaData));
+const nestedReducerIteree = (acc, fieldOrGroup) => {
+	console.log(Array.isArray(fieldOrGroup.meta));
+	return Array.isArray(fieldOrGroup.meta) ?
+		buildNestedFormGroup(fieldOrGroup.meta) :
+		buildNonNestedFormGroup(fieldOrGroup);
+};
+const _buildNestedFormGroup = reduce(nestedReducerIteree, {});
+const buildNestedFormGroup = nestedFormMetaData => _buildNestedFormGroup(nestedFormMetaData);
 
 // ---------------------------------------------------------------------------------------------------------------------
 // Exports
 
-export { extractFormGroupData };
+export { extractFormGroupData, buildNestedFormGroup };

src/app/dynaform/models/index.ts

@@ -127,11 +127,6 @@ class CheckbuttonField extends SimpleField {
 	type = 'Checkbutton';
 }
 
-class CheckbuttonGroup extends SimpleField {
-	value: (string | boolean)[];
-	type = 'CheckbuttonGroup';
-}
-
 class DropdownModifiedInputField extends SimpleField {
 	type = 'DropdownModifiedInput';
 	modifiers: string[];
@@ -141,6 +136,30 @@ class DropdownModifiedInputField extends SimpleField {
 	}
 }
 
+// ---------------------------------------------------------------------------------------------------------------------
+// Custom FormGroup Component Models - render a series of FormControls
+
+class CheckbuttonGroup {
+	type = 'CheckbuttonGroup';
+	name: string;
+	label?: string;
+	groupName: string;
+	firstEnablesRest;
+	meta: CheckbuttonField[];
+	constructor(groupmeta: any) {
+		Object.assign(this, groupmeta);
+		if (!this.label) {
+			// If label is not supplied set it to the unCamelCased'n'Spaced name
+			// e.g. supervisorCardNumber --> Supervisor Card Number
+			this.label = this.name.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase());
+		}
+		this.meta = [];
+		while (groupmeta.meta.length) {
+			this.meta.push( new CheckbuttonField(groupmeta.meta.shift()) );
+		}
+	}
+}
+
 // ---------------------------------------------------------------------------------------------------------------------
 // Kendo Form Component Models
 
@@ -158,7 +177,9 @@ class TimePickerField extends SimpleField {
 
 export {
 	TextField, TextareaField, PasswordField, SelectField, RadioField,
-	CheckbuttonField, CheckbuttonGroup, DropdownModifiedInputField, TimePickerField
+	CheckbuttonField, DropdownModifiedInputField,
+	CheckbuttonGroup,
+	TimePickerField
 };