Support for recursion underway

src/app/_mock/testfields.ts

@@ -125,6 +125,24 @@ const datepicker = new fmd.DatepickerField({
 	name: 'datepicker'
 });
 
+// ---------------------------------------------------------------------------------------------------------------------
+// Container
+
+const container = new fmd.Container({
+	basicTextField,
+	styledTextField,
+	textareaField,
+	passwordField,
+	selectField,
+	radioField,
+	disabledTextField,
+	radioFieldHorizontal,
+	checkbutton,
+	dropdownModifiedInput,
+	checkbuttonGroup,
+	timepicker,
+	datepicker
+});
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -141,7 +159,8 @@ export const formMetaDataObj = {
 	dropdownModifiedInput,
 	checkbuttonGroup,
 	timepicker,
-	datepicker
+	datepicker,
+	container
 };
 
 export const standAlone = {

src/app/app.component.ts

@@ -19,9 +19,6 @@ export class AppComponent implements OnInit {
 	@ViewChild('testTemplate', { read: TemplateRef })
 	private tref: TemplateRef<any>;
 
-	// tempctl;
-	// tempgrp;
-
 	constructor(
 		protected fb: FormBuilder
 	) {
@@ -33,8 +30,6 @@ export class AppComponent implements OnInit {
 		};
 		this.form = buildFormGroup(fullFormMeta);
 		this.form.addControl('standAlone', buildFormGroup(standAlone));
-		// this.tempctl = (<FormGroup>this.form.controls.standAlone).controls.checkbuttonSA;
-		// this.tempgrp = (<FormGroup>this.form.controls.standAlone).controls.checkbuttonGroupSA;
 	}
 }
 

src/app/dynaform/components/index.ts

@@ -1,6 +1,7 @@
 // Barrel grouping all form field components
 // See https://basarat.gitbooks.io/typescript/docs/tips/barrel.html
 
+export { DynaformComponent } from './../dynaform.component';
 export { TextComponent } from './native/text/text.component';
 export { TextareaComponent } from './native/textarea/textarea.component';
 export { PasswordComponent } from './native/password/password.component';
@@ -11,5 +12,3 @@ export { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component
 export { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.component';
 export { TimepickerComponent } from './kendo/timepicker/timepicker.component';
 export { DatepickerComponent } from './kendo/datepicker/datepicker.component';
-
-

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

@@ -2,6 +2,7 @@
 	[formControl]="control"
 	[format]="format"
 	[steps]="steps"
+	[value]="value"
 	[placeholder]="placeholder"
 	>
 </kendo-timepicker>

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

@@ -7,7 +7,7 @@ import { Form, FormControl, ControlContainer, NgControl, ControlValueAccessor, V
 import * as formFieldComponents from './../components';
 
 interface FFC {
-	control: FormControl;
+	control: FormControl; // Remember, this can be an individual control or a FormGroup
 	meta: StringMap;
 	propagateChange?: Function;
 }
@@ -56,7 +56,8 @@ export class DynafieldDirective extends NgControl implements OnInit {
 			);
 		}
 		try {
-			const { name, class: cssClass, id: cssId, isDisabled } = this.meta;
+			let { control, meta } = this;
+			const { name, class: cssClass, id: cssId, isDisabled } = meta;
 
 			// Create the component
 			const component = this.resolver.resolveComponentFactory<FFC>(formFieldComponents[type]);
@@ -65,12 +66,16 @@ export class DynafieldDirective extends NgControl implements OnInit {
 			const el = this.component.location.nativeElement;
 			el.classList.add(type.toLowerCase().replace('component', ''));
 
+			if (type === 'DynaformComponent') {
+				meta = meta.meta;
+			}
+
 			// Check whether it's disabled, then set its FormControl and metadata
 			if (isDisabled) {
 				this.control.reset({ value: this.control.value, disabled: true });
 			}
-			instance.control = this.control;
-			instance.meta = this.meta;
+			instance.control = control;
+			instance.meta = meta;
 
 			// Add id and classes (as specified)
 			if (cssId) {
@@ -90,7 +95,7 @@ export class DynafieldDirective extends NgControl implements OnInit {
 				this._control = this.formDirective.addControl(this);
 			}
 		} catch (e) {
-			console.error('ERROR INSTANTIATING DYNAFORM FIELD COMPONENT');
+			console.error('ERROR INSTANTIATING DYNAFORM CHILD COMPONENT', type);
 			console.log(e);
 		}
 	}

src/app/dynaform/dynaform.component.html

@@ -6,7 +6,7 @@
 <!-- Default template for form field
      used when a TemplateRef is NOT supplied to component -->
 <ng-template #default let-control="control" let-meta="meta">
-	<div class="row" [ngClass]="getRowClass(meta.type)">
+	<div class="row" *ngIf="meta.type !== 'CONTAINER'; else recursiveDynaform" [ngClass]="getRowClass(meta.type)">
 		<div class="col-sm-4">
 			<label [for]="meta.name">{{ meta.label }}</label>
 		</div>
@@ -14,5 +14,10 @@
 			<ng-container dynafield [control]="control" [meta]="meta"></ng-container>
 		</div>
 	</div>
+	<ng-template #recursiveDynaform>
+		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template"></app-dynaform>
+	</ng-template>
 </ng-template>
 
+
+

src/app/dynaform/dynaform.component.scss

@@ -1,3 +0,0 @@
-.timepicker {
-	max-width: 300px;
-}

src/app/dynaform/dynaform.component.ts

@@ -37,6 +37,11 @@ export class DynaformComponent implements OnInit {
 	@Input()
 	formGroupName?: FormGroupName;
 
+	@Input()
+	set control(fg: FormGroup) {
+		this.formGroup = fg;
+	}
+
 	@Input()
 	set meta(data) {
 		this.formMetaData = data;

src/app/dynaform/dynaform.module.ts

@@ -21,13 +21,10 @@ import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 		DateInputsModule
 	],
 	declarations: [
-		DynaformComponent,
 		DynafieldDirective,
 		...ffcArr
 	],
 	entryComponents: ffcArr,
-	exports: [
-		DynaformComponent
-	]
+	exports: ffcArr
 })
 export class DynaformModule { }

src/app/dynaform/models/index.ts

@@ -41,7 +41,7 @@ interface TimePickerFieldMetaData extends SimpleFieldMetaData {
 	// TODO: Tighhten up om types
 	value: Date;
 	format: string;
-	steps: StringMap
+	steps: StringMap;
 }
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -169,7 +169,7 @@ class CheckbuttonGroup {
 // ---------------------------------------------------------------------------------------------------------------------
 // Kendo Form Component Models
 
-class TimepickerField extends SimpleField {
+class TimepickerField<TimePickerFieldMetaData> extends SimpleField {
 	type = 'Timepicker';
 	value: Date = new Date();
 	format = 'hh:mm a';
@@ -181,7 +181,13 @@ class DatepickerField extends SimpleField {
 	value: Date = new Date();
 }
 
-
+class Container {
+	type = 'Dynaform';
+	meta: StringMap // TODO: Tighten up on type with union type
+	constructor(children: StringMap) {
+		this.meta = children;
+	}
+}
 
 // ---------------------------------------------------------------------------------------------------------------------
 // ---------------------------------------------------------------------------------------------------------------------
@@ -192,7 +198,8 @@ export {
 	TextField, TextareaField, PasswordField, SelectField, RadioField,
 	CheckbuttonField, DropdownModifiedInputField,
 	CheckbuttonGroup,
-	TimepickerField, DatepickerField
+	TimepickerField, DatepickerField,
+	Container
 };
 
 /* *********************************************************************************************************************