Connecting DynaformComponent with [formGroup] and formGroupName

src/app/app.component.html

@@ -8,7 +8,6 @@
        </p>
       </div>
     </div>
-      <app-dynaform></app-dynaform>
+      <app-dynaform formGroupName="dynaformtest" [meta]="formMetaDataObj"></app-dynaform>
   </div>
-  
 </form>

src/app/app.component.ts

@@ -8,7 +8,7 @@ import { ValueTransformer } from './dynaform/components/fields//dropdown-modifie
 
 import * as fmd from './dynaform/models/index'; // fmd = Form Meta Data
 
-// Utility function for extracting a FormGroup from a metadata object - currently non-nested only
+// Utility function for extracting a FormGroup from a form metadata object - currently non-nested only
 import { reduce } from 'lodash/fp';
 const reducerIteree = (res, field) => Object.assign(res, { [field.name]: field.value || '' });
 const _extractFormGroupData = reduce(reducerIteree, {});
@@ -78,7 +78,7 @@ export class AppComponent implements OnInit {
 			}
 			return transformedValue;
 		}
-	}
+	};
 
 	labels = ['Feature One', 'Allowed', 'Protected'];
 

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

@@ -1,5 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ControlContainer } from '@angular/forms';
+import { Component, Input, Optional, OnInit } from '@angular/core';
+import { FormGroup, FormGroupName, ControlContainer } from '@angular/forms';
 import { KeysPipe } from '@pipes/keys.pipe';
 
 @Component({
@@ -10,6 +10,12 @@ import { KeysPipe } from '@pipes/keys.pipe';
 })
 export class DynaformComponent implements OnInit {
 
+	@Input()
+	formGroup?: FormGroup;
+
+	@Input()
+	formGroupName?: FormGroupName;
+
 	@Input()
 	set meta(val) {
 		this.formMetaData = val;
@@ -18,15 +24,26 @@ export class DynaformComponent implements OnInit {
 	formMetaData: any; // TODO: Tighten up type
 	controlNames: Array<string>;
 
-	constructor(private cc: ControlContainer) {
-		console.log(this.cc);
-	}
+	constructor(
+		@Optional() private cc: ControlContainer
+	) {}
 
 	ngOnInit() {
-		console.log('dynaform.component ngOnInit');
-		if (this.cc) {
-			this.controlNames = Object.keys(this.cc.control.value);
+		console.log('Dynaform Component');
+		if (this.formGroup) {
+			console.log('Initailised with FormGroup dirtectly: Controls >');
+			console.log(Object.keys(this.formGroup.controls));
+		}
+		if (this.formGroupName) {
+			console.log('Initailised with FormGroupName:', this.formGroupName);
+			this.formGroup = <FormGroup>this.cc.control; // Get the associated formGroup from the ControlContainer
+			console.log('Loading Controls from ControlContainer >');
+			console.log(Object.keys(this.formGroup.controls));
 		}
+		if (!this.formGroup) {
+			throw new Error('Dynaform Component Initialised without [formGroup] or formGroupName');
+		}
+
 	}
 
 }