Pārlūkot izejas kodu

Adding neste FormGroup builder

Richard Knight 6 gadi atpakaļ
vecāks
revīzija
789cc925c1
3 mainītis faili ar 29 papildinājumiem un 25 dzēšanām
  1. 2 2
      src/app/app.component.html
  2. 2 6
      src/app/app.component.ts
  3. 25 17
      src/app/dynaform/libs/index.ts

+ 2 - 2
src/app/app.component.html

@@ -8,9 +8,9 @@
 				</p>
 			</div>
 		</div>
-		<app-dynaform formGroupName="dynaformtest" [meta]="formMetaDataObj" [template]="tref"></app-dynaform>
+		<app-dynaform [formGroup]="form" [meta]="formMetaDataObj" [template]="tref"></app-dynaform>
 		<div calss="row">
-			<div class="col-12 pt-4">
+			<div class="col-12 pt-4 pb-4">
 				<json-formatter [data]="form.value" open="2"></json-formatter>
 			</div>
 		</div>

+ 2 - 6
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, buildNestedFormGroup } from './dynaform/libs';
+import { buildFormGroup } from './dynaform/libs';
 
 import { formMetaDataObj } from './_mock/testfields';
 
@@ -24,11 +24,7 @@ export class AppComponent implements OnInit {
 	}
 
 	ngOnInit() {
-		this.form = this.fb.group({
-			dynaformtest: this.fb.group(extractFormGroupData(formMetaDataObj))
-		});
-		console.log('TESTING');
-		console.log(buildNestedFormGroup(formMetaDataObj));
+		this.form = buildFormGroup(this.formMetaDataObj);
 	}
 }
 

+ 25 - 17
src/app/dynaform/libs/index.ts

@@ -1,24 +1,32 @@
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl } 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 = 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);
+
+// Build Form Control
+// metaF = metadata for Field
+const buildControlState = metaF => ({ value: metaF.value || '', disabled: metaF.isDisabled });
+const buildValidators = metaF => ({
+	validators: null,
+	asyncValidators: null,
+	updateOn: 'blur'
+});
+const buildFormControl = metaF => new FormControl(buildControlState(metaF) /*, buildValidators(metaF) */);
+
+// Build Form Group Member
+// metaFoG = metadata for Field Or Group
+const isGroup = metaFoG => Array.isArray(metaFoG.meta);
+const buildFormGroupMember = metaFoG => isGroup(metaFoG) ? buildFormGroup(metaFoG.meta) : buildFormControl(metaFoG);
+
+// metaG = metadata for Group - possibly nested
+const buildFormGroupReducerIteree = (res, metaFoG) => Object.assign(res, { [metaFoG.name]: buildFormGroupMember(metaFoG) });
+const buildFormGroup = metaG => fb.group(reduce(buildFormGroupReducerIteree, {}, metaG));
 
 // ---------------------------------------------------------------------------------------------------------------------
 // Exports
 
-export { extractFormGroupData, buildNestedFormGroup };
+export { buildFormGroup };
+
+
+
+