HelpBot Assistant

How can I help you?

PDF Viewer Form Field Events in React

10 Mar 202610 minutes to read

The Syncfusion React PDF Viewer provides a set of form field events that report changes associated with creating, selecting, modifying, moving, resizing, or removing form fields. These events supply metadata related to the affected field and are raised during user interaction or programmatic updates.

Validation‑related events are emitted when the viewer performs operations that require confirmation of field completion, such as print or download actions.

Supported PDF Form Field Events

The following table lists all supported form field events and their descriptions:

Form Field events Description Arguments
formFieldAdd Triggered when a new form field is added, either through the Form Designer UI or programmatically. formFieldAddArgs
formFieldClick Fired when a form field is clicked in the viewer. formFieldClickArgs
formFieldDoubleClick Fired when a form field is double clicked. formFieldDoubleClickArgs
formFieldFocusOut Triggered when a form field loses focus after editing. formFieldFocusOutEventArgs
formFieldMouseLeave Fired when the mouse pointer leaves a form field. formFieldMouseLeaveArgs
formFieldMouseOver Fired when the mouse pointer moves over a form field. formFieldMouseOverArgs
formFieldMove Triggered when a form field is moved to a new position. formFieldMoveArgs
formFieldPropertiesChange Fired when any form field property changes, such as font, color, or constraint values. formFieldPropertiesChangeArgs
formFieldRemove Triggered when a form field is deleted from the document. formFieldRemoveArgs
formFieldResize Fired when a form field is resized. formFieldResizeArgs
formFieldSelect Fired when a form field is selected in the Form Designer. formFieldSelectArgs
formFieldUnselect Fired when a previously selected form field is unselected. formFieldUnselectArgs
validateFormFields Fired when form field validation fails during print or download actions. validateFormFieldsArgs

Example

You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';

import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  TextSelection,
  TextSearch,
  Print,
  Annotation,
  FormDesigner,
  FormFields,
  Inject
} from '@syncfusion/ej2-react-pdfviewer';

// Optional: If you want stronger typings for the event args, you can import from the core package:
// import type { FormFieldAddEventArgs, FormFieldRemoveEventArgs, ... } from '@syncfusion/ej2-pdfviewer';

function App(): JSX.Element {
  const viewerRef = React.useRef<PdfViewerComponent | null>(null);

  // ---------------------------
  // Form-field event handlers
  // ---------------------------

  const onFormFieldAdd = (args: any) => {
    console.log('formFieldAdd', args);
  };

  const onFormFieldRemove = (args: any) => {
    console.log('formFieldRemove', args);
  };

  const onFormFieldPropertiesChange = (args: any) => {
    console.log('formFieldPropertiesChange', args);
  };

  const onFormFieldClick = (args: any) => {
    console.log('formFieldClick', args);
  };

  const onFormFieldDoubleClick = (args: any) => {
    console.log('formFieldDoubleClick', args);
  };

  const onFormFieldFocusOut = (args: any) => {
    console.log('formFieldFocusOut', args);
  };

  const onFormFieldMouseOver = (args: any) => {
    console.log('formFieldMouseOver', args);
  };

  const onFormFieldMouseLeave = (args: any) => {
    console.log('formFieldMouseLeave', args);
  };

  const onFormFieldMove = (args: any) => {
    console.log('formFieldMove', args);
  };

  const onFormFieldResize = (args: any) => {
    console.log('formFieldResize', args);
  };

  const onFormFieldSelect = (args: any) => {
    console.log('formFieldSelect', args);
  };

  const onFormFieldUnselect = (args: any) => {
    console.log('formFieldUnselect', args);
  };

  // ---------------------------
  // Validation handler
  // ---------------------------
  const handleValidateFormFields = (args: any) => {
    if (args && args.formField && args.formField.length > 0) {
      // Prevent the pending action (submit/print/etc.)
      args.cancel = true;
      alert('Please fill all required fields. Missing: ' + args.formField[0].name);
      // Optionally: focus/scroll to the field here
    }
  };

  return (
    <div className="control-section">
      <PdfViewerComponent
        ref={viewerRef}
        id="pdfViewer"
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
        style=
        // Enable validation pipeline
        enableFormFieldsValidation={true}
        validateFormFields={handleValidateFormFields}
        // Wire form-field events
        formFieldAdd={onFormFieldAdd}
        formFieldRemove={onFormFieldRemove}
        formFieldPropertiesChange={onFormFieldPropertiesChange}
        formFieldClick={onFormFieldClick}
        formFieldDoubleClick={onFormFieldDoubleClick}
        formFieldFocusOut={onFormFieldFocusOut}
        formFieldMouseOver={onFormFieldMouseOver}
        formFieldMouseLeave={onFormFieldMouseLeave}
        formFieldMove={onFormFieldMove}
        formFieldResize={onFormFieldResize}
        formFieldSelect={onFormFieldSelect}
        formFieldUnselect={onFormFieldUnselect}
      >
        <Inject
          services={[
            Toolbar,
            Magnification,
            Navigation,
            LinkAnnotation,
            BookmarkView,
            ThumbnailView,
            TextSelection,
            TextSearch,
            Print,
            Annotation,
            FormDesigner,
            FormFields
          ]}
        />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample') as HTMLElement);
root.render(<App />);

Event Behavior Notes

  • Events triggered through the UI and programmatic APIs use the same event handlers.
  • Property related events are raised immediately when changes occur.
  • Validation events are triggered only during print or download operations.

View Sample on GitHub

See also