Debug Formyoula Field Changes With JavaScript

// Set field id to monitor
var field_id = '123-123-123';
// Set repeat id to monitor if the field is inside the repeat group
var repeat_id = '';
// Enable or Disable UI alerts for field changes
var enable_field_alerts = false;

// For new repeat group fields
formyoula.form_fields[ field_id ].on( 'all', function( event, data ) {
  // Log field information
  log_field_changes( {
    field: this,
    event: event,
    data: data
  } );
} );

// Check if repeat id is provided
if ( repeat_id ) {
  // Listening to all field changes in an existing repeat group item list
  formyoula.form_fields[ repeat_id ].on( 'all', function( event, data ) {
    // Check if field updates are available
    if ( !data || _.isEmpty( data.updated_sub_component ) ) return;
    // Get actual field that was changed
    var component = data.updated_sub_component;
    // Check if repeat field component changes should be tracked
    if ( component.get( 'component_id' ) != field_id ) return;
    // Log field information
    log_field_changes( {
      field: component,
      event: event,
      data: data
    } );
  } );
}

// Listen to all component initialize events
formyoula.event_on( 'component:initialize', function( options ) {
	// Get field component
	var component = options.view.model;
	// Check for field and repeat Ids
	if ( component.get( 'component_id' ) == field_id || component.get( 'component_id' ) == repeat_id ) {
		// Log field information
		log_field_changes( {
	    field: component,
	    event: 'component:initialize',
	    data: options
	  } );
	}
});

// Listen to all component on render events
formyoula.event_on( 'component:onRender', function( options ) {
	// Get field component
	var component = options.view.model;
	// Check for field and repeat Ids
	if ( component.get( 'component_id' ) == field_id || component.get( 'component_id' ) == repeat_id ) {
		// Log field information
		log_field_changes( {
	    field: component,
	    event: 'component:onRender',
	    data: options
	  } );
	}
});

function log_field_changes( options ) {
  // Log all options
  console.log( ' --------- ' + options.field.get( 'label' ) + ' ---------  ' );
  console.log( 'Field Value: ', options.field.get( 'value' ) );
  console.log( 'Event: ', options.event );
	console.log( 'Repeat Entry Id: ', options.field.get( 'attributes' ).repeat_entry_id );
	console.log( 'Field: ', options.field );
  console.log( 'Data: ', options.data );
}