Injecting ControlContainer

ng-dynaform.code-workspace

@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "src\\app\\dynaform"
+		}
+	],
+	"settings": {}
+}

package-lock.json

@@ -2002,6 +2002,11 @@
         }
       }
     },
+    "core-js": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
+    },
     "core-object": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/core-object/-/core-object-3.1.5.tgz",
@@ -3596,7 +3601,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3617,12 +3623,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3637,17 +3645,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3764,7 +3775,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3776,6 +3788,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3790,6 +3803,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3797,12 +3811,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3821,6 +3837,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3901,7 +3918,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3913,6 +3931,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3998,7 +4017,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4034,6 +4054,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4053,6 +4074,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4096,12 +4118,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -8432,6 +8456,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "rxjs": {
+      "version": "5.5.11",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.11.tgz",
+      "integrity": "sha512-3bjO7UwWfA2CV7lmwYMBzj4fQ6Cq+ftHc2MvUe+WMS7wcdJ1LosDWmdjPQanYp2dBRj572p7PeU81JUxHKOcBA==",
+      "requires": {
+        "symbol-observable": "1.0.1"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -9525,8 +9557,7 @@
     "symbol-observable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
-      "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=",
-      "dev": true
+      "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
     },
     "tapable": {
       "version": "0.2.8",

src/app/app.component.ts

@@ -32,22 +32,22 @@ const fieldThree = new fmd.BasicField({
 	value: 'C'
 });
 
-let formMetaDataObj= {
+const formMetaDataObj = {
 	fieldOne,
 	fieldTwo,
 	fieldThree
-}
+};
 
 // --------------------------------------------------------------------------
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+	selector: 'app-root',
+	templateUrl: './app.component.html',
+	styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
 
 	form: FormGroup;
-	
+
 	modifiers = ['Starts With', 'Contains', 'Matches'];
 	transformerFunctions: ValueTransformer = {
 		inputFn: val => {
@@ -81,7 +81,7 @@ export class AppComponent implements OnInit {
 	}
 
 	labels = ['Feature One', 'Allowed', 'Protected'];
-	
+
 	formMetaDataObj = formMetaDataObj;
 
 	@ViewChild('testTemplate', { read: TemplateRef })
@@ -93,7 +93,6 @@ export class AppComponent implements OnInit {
 	}
 
 	ngOnInit() {
-		/*
 		this.form = this.fb.group({
 			testVal: '%lovely%',
 			testCheckbutton: true,
@@ -104,7 +103,6 @@ export class AppComponent implements OnInit {
 			}),
 			dynaformtest: this.fb.group(extractFormGroupData(formMetaDataObj))
 		});
-		*/
 	}
 }
 

src/app/app.module.ts

@@ -1,21 +1,20 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-
+import { DynaformModule } from './dynaform/dynaform.module';
 import { AppComponent } from './app.component';
 
-
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-	BrowserModule,
-	FormsModule,
-	ReactiveFormsModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+	imports: [
+		BrowserModule,
+		FormsModule,
+		ReactiveFormsModule,
+		DynaformModule
+	],
+	declarations: [
+		AppComponent
+	],
+	providers: [],
+	bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -1,8 +1,2 @@
-<span [formGroup]="cc.control">
-	<app-dynarow *ngFor="let field of controlNames"
-		[formControlName]="field"
-		[meta]="formMetaData[field]"
-		>
-	</app-dynarow>
-	<!-- <input *ngFor="let field of controlNames" type="text" [formControlName]="field"> -->
-</span>
+<h2>I am DynaformComponent</h2>
+

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ControlContainer, FormGroup, FormControl } from '@angular/forms';
+import { ControlContainer } from '@angular/forms';
 import { KeysPipe } from '@pipes/keys.pipe';
 
 @Component({
@@ -18,10 +18,12 @@ export class DynaformComponent implements OnInit {
 	formMetaData: any; // TODO: Tighten up type
 	controlNames: Array<string>;
 
-	constructor(private cc: ControlContainer) { 
+	constructor(private cc: ControlContainer) {
+		console.log(this.cc);
 	}
 
 	ngOnInit() {
+		console.log('dynaform.component ngOnInit');
 		if (this.cc) {
 			this.controlNames = Object.keys(this.cc.control.value);
 		}

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

@@ -24,7 +24,7 @@ export class CheckbuttonGroupComponent implements OnInit {
 		private el: ElementRef,
 		private cc: ControlContainer,
 		@Attribute('firstEnablesRest') private firstEnablesRest
-	) { 
+	) {
 		// Read the classes applied to the host element, to pass through to the template
 		this.extraClass = el.nativeElement.className;
 		this.firstEnablesRest = firstEnablesRest === ''; // True if 'firstEnablesRest' exists as component attribute

src/app/dynaform/dynaform.module.ts

@@ -1,10 +1,22 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { DynaformComponent } from './components/dynaform/dynaform.component';
 
 @NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: []
+	imports: [
+		CommonModule,
+		FormsModule,
+		ReactiveFormsModule
+	],
+	declarations: [
+		DynaformComponent
+	],
+	providers: [
+	],
+	exports: [
+		DynaformComponent
+	]
 })
 export class DynaformModule { }

src/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>NgDynaform</title>
   <base href="/">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

tslint.json

@@ -24,7 +24,7 @@
     "import-spacing": true,
     "indent": [
       true,
-      "spaces"
+      "tabs"
     ],
     "interface-over-type-literal": true,
     "label-position": true,