feat(core): emit expressionChanges event through fieldChanges option (#…

…2357) fix #2350
ngx-formly · Jul 12, 2020 · 5d19b9f · 5d19b9f
1 parent eaa66ed
commit 5d19b9f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/src/core/src/lib/components/formly.field.config.ts b/src/core/src/lib/components/formly.field.config.ts
@@ -272,5 +272,6 @@ export interface FormlyValueChangeEvent {
   field: FormlyFieldConfig;
   type: string;
   value: any;
+  [meta: string]: any;
 }
 
diff --git a/src/core/src/lib/extensions/field-expression/field-expression.spec.ts b/src/core/src/lib/extensions/field-expression/field-expression.spec.ts
@@ -39,6 +39,48 @@ describe('FieldExpressionExtension', () => {
     builder = formlyBuilder;
   }));
 
+  describe('fieldChanges', () => {
+    it('should emit fieldChanges when expression value changes', () => {
+      const fields: FormlyFieldConfig[] = [
+        {
+          key: 'name',
+          expressionProperties: {
+            'templateOptions.label': 'field.formControl.value',
+          },
+        },
+      ];
+      const spy = jasmine.createSpy('fieldChanges spy');
+      const subscription = options.fieldChanges.subscribe(spy);
+
+      builder.buildForm(form, fields, {}, options);
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith(
+        {
+          field: fields[0],
+          type: 'expressionChanges',
+          property: 'templateOptions.label',
+          value: null,
+        },
+      );
+
+      spy.calls.reset();
+      form.get('name').patchValue('foo');
+      options._checkField({ formControl: form, fieldGroup: fields, options });
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith(
+        {
+          field: fields[0],
+          type: 'expressionChanges',
+          property: 'templateOptions.label',
+          value: 'foo',
+        },
+      );
+
+      subscription.unsubscribe();
+    });
+  });
+
   describe('field visibility (hideExpression)', () => {
     it('should update field visibility', () => {
       const fields: FormlyFieldConfig[] = [

diff --git a/src/core/src/lib/extensions/field-expression/field-expression.ts b/src/core/src/lib/extensions/field-expression/field-expression.ts
@@ -222,7 +222,7 @@ export class FieldExpressionExtension implements FormlyExtension {
     }
 
     if (field.options.fieldChanges) {
-      field.options.fieldChanges.next(<FormlyValueChangeEvent> { field: field, type: 'hidden', value: hide });
+      field.options.fieldChanges.next(<FormlyValueChangeEvent> { field, type: 'hidden', value: hide });
     }
   }
 
@@ -257,5 +257,20 @@ export class FieldExpressionExtension implements FormlyExtension {
         control.patchValue(value, { emitEvent: false });
       }
     }
+
+    this.emitExpressionChanges(field, prop, value);
+  }
+
+  private emitExpressionChanges(field: FormlyFieldConfigCache, property: string, value: any) {
+    if (!field.options.fieldChanges) {
+      return;
+    }
+
+    field.options.fieldChanges.next({
+      field: field,
+      type: 'expressionChanges',
+      property,
+      value,
+    });
   }
 }