Syncfusion AI Assistant

How can I help you?

PDF Viewer Form Field Events in Angular

7 Apr 20267 minutes to read

The Syncfusion Angular 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

Form field events can be wired on the PDF Viewer instance to execute custom logic when specific actions occur.

import { Component, ViewChild } from '@angular/core';
import {
  PdfViewerModule,
  PdfViewerComponent,
  ToolbarService,
  MagnificationService,
  NavigationService,
  AnnotationService,
  TextSelectionService,
  TextSearchService,
  FormFieldsService,
  FormDesignerService,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        #pdfviewer
        id="pdfViewer"
        [resourceUrl]="resourceUrl"
        [documentPath]="document"
        [enableFormFieldsValidation]="true"
        (formFieldAdd)="onFormFieldAdd($event)"
        (formFieldRemove)="onFormFieldRemove($event)"
        (formFieldPropertiesChange)="onFormFieldPropertiesChange($event)"
        (formFieldClick)="onFormFieldClick($event)"
        (formFieldDoubleClick)="onFormFieldDoubleClick($event)"
        (formFieldFocusOut)="onFormFieldFocusOut($event)"
        (formFieldMouseOver)="onFormFieldMouseOver($event)"
        (formFieldMouseLeave)="onFormFieldMouseLeave($event)"
        (formFieldMove)="onFormFieldMove($event)"
        (formFieldResize)="onFormFieldResize($event)"
        (formFieldSelect)="onFormFieldSelect($event)"
        (formFieldUnselect)="onFormFieldUnselect($event)"
        (validateFormFields)="validateFormFields($event)"
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    AnnotationService,
    TextSelectionService,
    TextSearchService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent {
  public document = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
  @ViewChild('pdfviewer') public pdfviewer?: PdfViewerComponent;

  onFormFieldAdd(args: any) { console.log('formFieldAdd', args); }
  onFormFieldRemove(args: any) { console.log('formFieldRemove', args); }
  onFormFieldPropertiesChange(args: any) { console.log('formFieldPropertiesChange', args); }
  onFormFieldClick(args: any) { console.log('formFieldClick', args); }
  onFormFieldDoubleClick(args: any) { console.log('formFieldDoubleClick', args); }
  onFormFieldFocusOut(args: any) { console.log('formFieldFocusOut', args); }
  onFormFieldMouseOver(args: any) { console.log('formFieldMouseOver', args); }
  onFormFieldMouseLeave(args: any) { console.log('formFieldMouseLeave', args); }
  onFormFieldMove(args: any) { console.log('formFieldMove', args); }
  onFormFieldResize(args: any) { console.log('formFieldResize', args); }
  onFormFieldSelect(args: any) { console.log('formFieldSelect', args); }
  onFormFieldUnselect(args: any) { console.log('formFieldUnselect', args); }

  validateFormFields(args: any) {
    if (args && args.formField && args.formField.length > 0) {
      args.cancel = true;
      alert('Please fill all required fields. Missing: ' + args.formField[0].name);
    }
  }
}

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