diff --git a/src/custom-component/create-custom-component.ts b/src/custom-component/create-custom-component.ts index cb89e237..83d3212d 100644 --- a/src/custom-component/create-custom-component.ts +++ b/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) => { + 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(); diff --git a/src/formio.common.ts b/src/formio.common.ts index 24db3f7c..b1b70588 100644 --- a/src/formio.common.ts +++ b/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 { value: T; // Should be an @Input valueChange: EventEmitter; // Should be an @Output disabled: boolean; + formioEvent?: EventEmitter; // Should be an @Output }