Merge pull request #443 from merobal/codingsans

Support emit event from Custom Component

Author: travist

src/custom-component/create-custom-component.ts

@@ -1,5 +1,5 @@
 import { BuilderInfo, Components, ExtendedComponentSchema, Utils as FormioUtils } from 'formiojs';
-import { FormioCustomComponentInfo, FormioCustomElement } from '../formio.common';
+import { FormioCustomComponentInfo, FormioCustomElement, FormioEvent } from '../formio.common';
 import { clone, isNil, isArray } from 'lodash';
 
 const BaseInputComponent = Components.components.input;
@@ -106,16 +106,19 @@ export function createCustomFormioComponent(customComponentOptions: FormioCustom
           superAttach = super.attach(element);
         }
 
+        // Bind customOptions
         for (const key in this.component.customOptions) {
           if (this.component.customOptions.hasOwnProperty(key)) {
             this._customAngularElement[key] = this.component.customOptions[key];
           }
         }
+        // Bind validate options
         for (const key in this.component.validate) {
           if (this.component.validate.hasOwnProperty(key)) {
             this._customAngularElement[key] = this.component.validate[key];
           }
         }
+        // Bind options explicitly set
         const fieldOptions = customComponentOptions.fieldOptions;
         if (isArray(fieldOptions) && fieldOptions.length > 0) {
           for (const key in fieldOptions) {
@@ -125,6 +128,14 @@ export function createCustomFormioComponent(customComponentOptions: FormioCustom
           }
         }
 
+        // Attach event listener for emit event
+        this._customAngularElement.addEventListener('formioEvent', (event: CustomEvent<FormioEvent>) => {
+          this.emit(event.detail.eventName, {
+            ...event.detail.data,
+            component: this.component
+          });
+        });
+
         // Ensure we bind the value (if it isn't a multiple-value component with no wrapper)
         if (!this._customAngularElement.value && !this.component.disableMultiValueWrapper) {
           this.restoreValue();

src/formio.common.ts

@@ -86,8 +86,16 @@ export interface FormioCustomComponentInfo extends BuilderInfo {
 
 export type FormioCustomElement = NgElement & WithProperties<{ value: any } & ExtendedComponentSchema>;
 
+export interface FormioEvent {
+  eventName: string;
+  data?: {
+    [key: string]: any;
+  };
+}
+
 export interface FormioCustomComponent<T> {
   value: T; // Should be an @Input
   valueChange: EventEmitter<T>; // Should be an @Output
   disabled: boolean;
+  formioEvent?: EventEmitter<FormioEvent>; // Should be an @Output
 }