Form Fields API in TypeScript PDF Viewer

5 Dec 202519 minutes to read

The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:

API	Description
updateFormFieldsValue	Updates the value for one or more form fields.
updateFormFields	Updates the properties of one or more form fields.
retrieveFormFields	Retrieves all form fields or by specific criteria.
resetFormFields	Resets the specified or all form fields to their default values.
importFormFields	Imports values and states for form fields from a JSON object or file stream.
focusFormField	Sets focus to a form field by name or ID.
exportFormFieldsAsObject	Exports form fields as a JSON object.
exportFormFields	Exports form fields as a downloadable file.
clearFormFields	Clears values of specified or all form fields without removing them.
isFormFieldDocument	Indicates whether the loaded document contains form fields.
isFormDesignerToolbarVisible	Gets whether the Form Designer toolbar is currently visible.
formFieldCollections	Gets the collection of current form fields with their properties.
enableFormFieldsValidation	Enables or disables form field validation.
enableFormFields	Enables or disables interaction with form fields.
enableFormDesignerToolbar	Shows or hides the Form Designer toolbar.

updateFormFieldsValue

Updates the value of one or more form fields programmatically.

<button id="updateFormFieldsValue">updateFormFieldsValue</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('updateFormFields');
if (btn) {
  btn.onclick = () => {
   // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is FIrst Name)
  const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly
  if (field) {
    // give value to be updated in teh for
    field.value='John Doe';
    field.tooltip='First'
    pdfviewer.updateFormFieldsValue(field);
  }
  };
}

updateFormFields

Updates form field properties such as bounds, color, font, isReadOnly, required, and more.

<button id="updateFormFields">updateFormFields</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('updateFormFields');
if (btn) {
  btn.onclick = () => {
   // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is FIrst Name)
  const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly
  if (field) {
    // Update textbox field styling and value
    pdfviewer.formDesignerModule.updateFormField(field, {
      value: 'John',
      fontFamily: 'Courier',
      fontSize: 12,
      color: 'black',
      backgroundColor: 'white',
      borderColor: 'black',
      thickness: 2,
      alignment: 'Left',
      maxLength: 50
    } as TextFieldSettings);
  }
  };
}

retrieveFormFields

Retrieves all form fields and their properties or filters by type/name.

<button id="retrieveFormFields">retrieveFormFields</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('retrieveFormFields');
if (btn) {
  btn.onclick = () => {
    const fields = pdfviewer.retrieveFormFields();
    console.log(fields);
  };
}

resetFormFields

Resets specified form fields or all fields to their default values.

<button id="resetFormFields">resetFormFields</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('resetFormFields');
if (btn) {
  btn.onclick = () => {
    pdfviewer.resetFormFields();
  };
}

importFormFields

Imports form field data from an object or file into the current document.

<button id="importFormFields">importFormFields</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('importFormFields');
if (btn) {
  btn.onclick = () => {
     // The file for importing should be accessible at the given path or as a file stream depending on your integration
  pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
  };
}

focusFormField

Moves focus to a form field by name or ID.

<button id="focusFormField">focusFormField</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('focusFormField');
if (btn) {
  btn.onclick = () => {
    pdfviewer.focusFormField('FirstName');
  };
}

exportFormFieldsAsObject

Exports current form field values and states as a JSON object.

<button id="exportFormFieldsAsObject">exportFormFieldsAsObject</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('exportFormFieldsAsObject');
if (btn) {
  let exportedData: Object|undefined;
  btn.onclick = () => {
    pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
    exportedData = data; // Save or send to server
    console.log('Exported object:', exportedData);
  });
  };
}

exportFormFields

Exports form field data to a file for download.

<button id="exportFormFields">exportFormFields</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FormFieldDataFormat} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('exportFormFields');
if (btn) {
  btn.onclick = () => {
    pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
  };
}

clearFormFields

Clears values of specified or all fields without removing the fields themselves.

<button id="clearformfield">clearformfield</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
pdfviewer.appendTo('#PdfViewer');

const btn = document.getElementById('clearFormFields');
if (btn) {
  btn.onclick = () => {
  let field=pdfviewer.retrieveFormFields();
  pdfviewer.clearFormFields(field[0]);
  };
}

isFormFieldDocument

Returns true if the loaded document contains one or more form fields.

<button id="checkFormFieldDocument">checkFormFieldDocument</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

const element = document.getElementById('checkFormFieldDocument');
if (element) {
    element.onclick = () => {
        console.log(pdfviewer.isFormFieldDocument);
    }
}

isFormDesignerToolbarVisible

Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially
and get the form designer Toolbar Visible status.

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

// Open the Form Designer toolbar and read its visibility state
pdfviewer.enableFormDesignerToolbar(true);
console.log(pdfviewer.isFormDesignerToolbarVisible);

formFieldCollections

Gets the current collection of form fields with their properties from the viewer instance.

<button id="formfieldcollection">formfieldcollection</button>

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

const element = document.getElementById('formfieldcollection');
if (element) {
    element.onclick = () => {
        console.log(pdfviewer.formFieldCollections);
    }
}

enableFormFieldsValidation

Enables or disables built-in validation for required and constrained fields.

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.enableFormFieldsValidation = true; // enable form fields validation
pdfviewer.appendTo('#PdfViewer');

enableFormFields

Enables or disables user interaction with form fields globally.

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.enableFormFields = false;  // Disable interaction with all fields
pdfviewer.appendTo('#PdfViewer');

enableFormDesignerToolbar

Shows or hides the Form Designer toolbar at runtime.

index.ts

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

// Show or hide the Form Designer toolbar at runtime
pdfviewer.enableFormDesignerToolbar(true); // show
// pdfviewer.enableFormDesignerToolbar(false); // hide

See also

• Form Designer overview
• Form Designer Toolbar
• Create form fields
• Edit form fields
• Group form fields
• Add custom data to form fields
• Form Constrain
• Form fields Validation