Add Events to form fields

[maalej_Abdelaziz]

Hello and thank you for the form viewer library.
I am trying to add simple event listeners for each field of my form.
I found that’s not that easy or I am missing something. For example I need to add an onBlur event for the textfield but it does not work.

Blockquote
components: [
{
label: ‘URI’,
type: ‘textfield’,
id: ‘field_id’,
key: ‘uri’,
defaultValue: ‘http://’,
onBlur: () => {
console.log(‘field is blurred’)
}
},
am I missing sothing?

[Niklas_Kiefer]

Hi @maalej_Abdelaziz thanks for reaching out!

Am I correct you want to provide custom event listeners for form fields? This is not possible at the moment, unfortunately.

The solution you sketched via form schema will also be hard to support, as forms are JSON objects that won’t be able to store Javascript functions. I think the best solution would be to use the eventBus to listen for such events.

Something like this, which is not yet supported.

const eventBus = form.get('eventBus');

eventBus.on('formField.blur', function(event) {
  const { formField } = event;

  console.log('field is blurred', formField);
  // do something else
});

We have a fairly old feature request that you can subscribe to: Make it possible to listen to on focus events · Issue #60 · bpmn-io/form-js · GitHub. I will leave a notice that this was mentioned in the forum to indicate a use case So thanks again for reaching out

[Niklas_Kiefer]

@maalej_Abdelaziz happy to announce that we picked this one up so it will be possible to hook into focus/blur events with the next form-js release.

Make it possible to listen to on focus events