Add targetFormGroup to ConditionMatcherResult

Author: hmeyde

package-lock.json

@@ -24,9 +24,9 @@
     "@angular/platform-browser": "~11.2.1",
     "@angular/platform-browser-dynamic": "~11.2.1",
     "@angular/router": "~11.2.1",
-    "mfx-advanced-condition-matcher": "^1.1.0",
-    "mfx-field-presence-matcher": "2.0.0",
-    "mfx-key-value-matcher": "1.0.0",
+    "mfx-advanced-condition-matcher": "latest",
+    "mfx-field-presence-matcher": "latest",
+    "mfx-key-value-matcher": "latest",
     "ng-dynamic-component": "^8.0.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",

package.json

@@ -17,3 +17,17 @@ <h3>Form</h3>
   </pre>
 </div>
 
+<div>
+  <h1>External Form Group</h1>
+  <form [formGroup]="externalFormGroup">
+    <label for="first-name">First Name: </label>
+    <input id="first-name" type="text" formControlName="firstName">
+
+    <label for="last-name">Last Name: </label>
+    <input id="last-name" type="text" formControlName="lastName">
+  </form>
+
+
+  <p>Target Form Group: {{ externalFormGroup.value | json }}</p>
+</div>
+

projects/mf-dynamic-form-demo/src/app/app.component.html

@@ -1,8 +1,8 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {PURCHASE_ORDER_FORM_DEFINITION} from './order-form-definition';
-import {MfForm} from 'mf-dynamic-form';
-import {DynamicFormComponent} from 'mf-dynamic-form';
-import {FormApi} from 'mf-dynamic-form';
+import {DynamicFormComponent, FormApi, MfForm} from 'mf-dynamic-form';
+import {FormBuilder} from '@angular/forms';
+
 
 @Component({
   selector: 'app-root',
@@ -13,10 +13,19 @@ export class AppComponent  {
   @ViewChild(DynamicFormComponent)
   dynamicForm: DynamicFormComponent;
 
-  form: MfForm = PURCHASE_ORDER_FORM_DEFINITION;
+  externalFormGroup = this.fb.group({
+    firstName: [''],
+    lastName: ['']
+  });
+
+  form: MfForm = PURCHASE_ORDER_FORM_DEFINITION(this.externalFormGroup);
   api: FormApi;
   formData: any;
 
+
+
+  constructor(private fb: FormBuilder) { }
+
   onSubmit(formData: any) {
     console.log(formData)
     this.formData = formData;

projects/mf-dynamic-form-demo/src/app/app.component.ts

@@ -4,15 +4,16 @@ import {MfDynamicFormModule} from 'mf-dynamic-form';
 
 import {AppComponent} from './app.component';
 import {ExempleCustomFormControlComponent} from './custom-form-controls/exemple-custom-form-control.component';
+import {ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
     AppComponent,
     ExempleCustomFormControlComponent
   ],
-  imports: [
-    BrowserModule, MfDynamicFormModule
-  ],
+    imports: [
+        BrowserModule, MfDynamicFormModule, ReactiveFormsModule
+    ],
   providers: [],
   bootstrap: [AppComponent]
 })