Add Events to form fields

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.

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

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 :+1: So thanks again for reaching out :heart:

@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.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.