Adding skeleton Dynaform

README.md

@@ -1,27 +1,3 @@
 # NgDynaform
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Beakout project to develop Dynamic Form Builder module

src/app/app.component.ts

@@ -1,10 +1,108 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
 
+import { ValueTransformer } from './dynaform/components/fields//dropdown-modified-input/dropdown-modified-input.component';
+
+// ---------------------------------------------------------------------------------------------------------------------
+// For Dynaform
+
+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
+import { reduce } from 'lodash/fp';
+const reducerIteree = (res, field) => Object.assign(res, { [field.name]: field.value || '' });
+const _extractFormGroupData = reduce(reducerIteree, {});
+const extractFormGroupData = nonNestedFormMetaLevel => _extractFormGroupData(nonNestedFormMetaLevel);
+
+const fieldOne = new fmd.BasicField({
+	name: 'fieldOne',
+	type: 'Checkbutton',
+	value: '123',
+	label: 'Field One'
+});
+
+const fieldTwo = new fmd.BasicField({
+	name: 'fieldTwo',
+	type: 'Checkbutton',
+	value: '456',
+});
+
+const fieldThree = new fmd.BasicField({
+	name: 'fieldThree',
+	value: 'C'
+});
+
+let formMetaDataObj= {
+	fieldOne,
+	fieldTwo,
+	fieldThree
+}
+
+// --------------------------------------------------------------------------
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnInit {
+
+	form: FormGroup;
+	
+	modifiers = ['Starts With', 'Contains', 'Matches'];
+	transformerFunctions: ValueTransformer = {
+		inputFn: val => {
+			let modifier = 'Starts With';
+			if (/^%.*?%$/.test(val)) {
+				modifier = 'Contains'
+			} else if (/^[^%].*?[^%]$/.test(val)) {
+				modifier = 'Matches'
+			} else if (/^%.*/.test(val)) {
+				modifier = 'Starts With';
+			}
+			const transformedVal = val.replace(/%/g, '').trim();
+			return { modifier: modifier, value: transformedVal };
+		},
+		outputFn: (mod, val) => {
+			let transformedValue;
+			switch(mod) {
+				case 'Starts With':
+					transformedValue = `%${val}`;
+					break;
+				case 'Contains':
+					transformedValue = `%${val}%`;
+					break;
+				case 'Matches':
+				default:
+					transformedValue = val;
+					break;
+			}
+			return transformedValue;
+		}
+	}
+
+	labels = ['Feature One', 'Allowed', 'Protected'];
+	
+	formMetaDataObj = formMetaDataObj;
+
+	@ViewChild('testTemplate', { read: TemplateRef })
+	private tref: TemplateRef<any>;
+
+	constructor(
+		protected fb: FormBuilder
+	) {
+	}
+
+	ngOnInit() {
+		this.form = this.fb.group({
+			testVal: '%lovely%',
+			testCheckbutton: true,
+			testCheckbuttonGroup: this.fb.group({
+				feature1: true,
+				feature1Allowed: true,
+				feature1Password: false
+			}),
+			dynaformtest: this.fb.group(extractFormGroupData(formMetaDataObj))
+		});
+	}
 }
+

src/app/dynaform/models/index.ts

@@ -1,11 +1,11 @@
-/***********************************************************************************************************************
+/* **********************************************************************************************************************
  * MetaData models for Form Fields
  * -------------------------------
  * Keep in one file for now, but maybe split if this grows too large
- **********************************************************************************************************************/
+ ********************************************************************************************************************* */
 
 import { ValidatorFn, AsyncValidatorFn } from '@angular/forms';
-import { ValueTransformer } from '@components/dropdown-modified-input/dropdown-modified-input.component';
+import { ValueTransformer } from 'dynaform/components/fields/dropdown-modified-input/dropdown-modified-input.component';
 
 // ---------------------------------------------------------------------------------------------------------------------
 // Types & Interfaces
@@ -107,12 +107,13 @@ export { BasicField, OptionsField, DropdownModifiedInputField, TimePickerField }
 
 
 
-/***********************************************************************************************************************
+/* *********************************************************************************************************************
  * Usage
  * Just ideas here for reference at the moment
- **********************************************************************************************************************/
+ ******************************************************************************************************************** */
 
 /*
+
  (1) Approach 1: Loop through model and 'lazily generate' the metadata. Something like...
 
  overrides = {
@@ -147,16 +148,4 @@ for (field in model) {
  ...
  Then pass modeledMeta to dynamic form generator / layout, etc
 
- /*
-
-
-
-
-
-
-
-
-
-
-
-
+ */