diff --git a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-programmatically.md
deleted file mode 100644
index ee1b36ccde..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-programmatically.md
+++ /dev/null
@@ -1,1359 +0,0 @@
----
-layout: post
-title: Create form fields in the Angular PDF Viewer component | Syncfusion
-description: Learn here all about Create programmatically in Syncfusion Angular PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: document-processing
-control: Create programmatically
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Create programmatically in Angular Pdf viewer control
-
-The PDF Viewer component provides options to add, edit, and delete form fields. The supported form field types are:
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-## Add a form field to PDF document programmatically
-
-Use the addFormField method to add form fields programmatically. Pass the form field type and the corresponding property object as parameters. The following example demonstrates adding multiple fields on document load.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import {PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
- ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService,
- FormDesignerService, LoadEventArgs, FormFieldsService, TextFieldSettings, SignatureFieldSettings, InitialFieldSettings,
- CheckBoxFieldSettings, RadioButtonFieldSettings } from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // Specifies the template string for the PDF Viewer component.
- template: `
-
-
-
`,
- providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService,
-NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormDesignerService, FormFieldsService]
-})
-export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl?: PdfViewerComponent;
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
- public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
-
- documentLoaded(e: LoadEventArgs): void {
- this.pdfviewerControl?.formDesignerModule.addFormField("Textbox", {name: 'First Name', bounds: { X: 146, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'Last Name',bounds: { X: 530, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('RadioButton', {bounds: { X: 148, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,} as RadioButtonFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('RadioButton', {bounds: { X: 292, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,} as RadioButtonFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Month',bounds: { X: 146, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Date',bounds: { X: 193, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Year',bounds: { X: 242, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('InitialField', {name: 'Agree',bounds: { X: 148, Y: 408, Width: 200, Height: 43 },} as InitialFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('InitialField', {name: 'Do Not Agree',bounds: { X: 148, Y: 466, Width: 200, Height: 43 },} as InitialFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Text Message',bounds: { X: 56, Y: 664, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Email',bounds: { X: 242, Y: 664, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Appointment Reminder',bounds: { X: 56, Y: 740, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Request for Customerservice',bounds: { X: 56, Y: 778, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Information Billing',bounds: { X: 290, Y: 740, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'My Email',bounds: { X: 146, Y: 850, Width: 200, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'My Phone',bounds: { X: 482, Y: 850, Width: 200, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('SignatureField', {name: 'Sign',bounds: { X: 57, Y: 923, Width: 200, Height: 43 },} as SignatureFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Month',bounds: { X: 386, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Date',bounds: { X: 434, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Year',bounds: { X: 482, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- }
-
- ngOnInit(): void {
- }
-}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/addformfield-cs1/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file:
-`public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'`;
-Within the template, configure the PDF Viewer by adding the `[serviceUrl]='service'` attribute inside the div element.
-
-{% previewsample "/document-processing/samples/pdfviewer/anagular/addformfield-cs1" %}
-
-## Edit/Update form field programmatically
-
-Use the updateFormField method to modify a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it as the first parameter. Provide the properties to update as the second parameter. The following example updates the background color of a Textbox field.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import {PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
- ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService,
- FormDesignerService, FormFieldsService, TextFieldSettings, SignatureFieldSettings, InitialFieldSettings,
- CheckBoxFieldSettings, LoadEventArgs, RadioButtonFieldSettings } from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // Specifies the template string for the PDF Viewer component.
- template: `
-
-
-
`,
- providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService,
-NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormDesignerService, FormFieldsService]
-})
-export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl?: PdfViewerComponent;
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
- public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
-
- documentLoaded(e: LoadEventArgs): void {
- this.pdfviewerControl?.formDesignerModule.addFormField("Textbox", {name: 'First Name', bounds: { X: 146, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'Last Name',bounds: { X: 530, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('RadioButton', {bounds: { X: 148, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,} as RadioButtonFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('RadioButton', {bounds: { X: 292, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,} as RadioButtonFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Month',bounds: { X: 146, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Date',bounds: { X: 193, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Year',bounds: { X: 242, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('InitialField', {name: 'Agree',bounds: { X: 148, Y: 408, Width: 200, Height: 43 },} as InitialFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('InitialField', {name: 'Do Not Agree',bounds: { X: 148, Y: 466, Width: 200, Height: 43 },} as InitialFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Text Message',bounds: { X: 56, Y: 664, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Email',bounds: { X: 242, Y: 664, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Appointment Reminder',bounds: { X: 56, Y: 740, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Request for Customerservice',bounds: { X: 56, Y: 778, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Information Billing',bounds: { X: 290, Y: 740, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'My Email',bounds: { X: 146, Y: 850, Width: 200, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'My Phone',bounds: { X: 482, Y: 850, Width: 200, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('SignatureField', {name: 'Sign',bounds: { X: 57, Y: 923, Width: 200, Height: 43 },} as SignatureFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Month',bounds: { X: 386, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Date',bounds: { X: 434, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Year',bounds: { X: 482, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.updateFormField(this.pdfviewerControl?.formFieldCollections[0], { backgroundColor: 'red' } as TextFieldSettings);
- }
-
- ngOnInit(): void {
- }
-}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/updateformfield-cs1/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file:
-`public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'`;
-Within the template, configure the PDF Viewer by adding the `[serviceUrl]='service'` attribute inside the div element.
-
-{% previewsample "/document-processing/samples/pdfviewer/angular/updateformfield-cs1" %}
-
-## Delete form field programmatically
-
-Use the deleteFormField method to remove a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it to deleteFormField. The following example deletes the first form field.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import {PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
- ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService,
- FormDesignerService, FormFieldsService, TextFieldSettings, SignatureFieldSettings, InitialFieldSettings,
- CheckBoxFieldSettings, LoadEventArgs, RadioButtonFieldSettings } from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // Specifies the template string for the PDF Viewer component.
- template: `
-
-
-
`,
- providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService,
-NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormDesignerService, FormFieldsService]
-})
-export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl?: PdfViewerComponent;
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
- public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
-
- documentLoaded(e: LoadEventArgs): void {
- this.pdfviewerControl?.formDesignerModule.addFormField("Textbox", {name: 'First Name', bounds: { X: 146, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'Last Name',bounds: { X: 530, Y: 229, Width: 150, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('RadioButton', {bounds: { X: 148, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,} as RadioButtonFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('RadioButton', {bounds: { X: 292, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,} as RadioButtonFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Month',bounds: { X: 146, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Date',bounds: { X: 193, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOB Year',bounds: { X: 242, Y: 320, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('InitialField', {name: 'Agree',bounds: { X: 148, Y: 408, Width: 200, Height: 43 },} as InitialFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('InitialField', {name: 'Do Not Agree',bounds: { X: 148, Y: 466, Width: 200, Height: 43 },} as InitialFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Text Message',bounds: { X: 56, Y: 664, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Email',bounds: { X: 242, Y: 664, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Appointment Reminder',bounds: { X: 56, Y: 740, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Request for Customerservice',bounds: { X: 56, Y: 778, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('CheckBox', {name: 'Information Billing',bounds: { X: 290, Y: 740, Width: 20, Height: 20 },isChecked: false,} as CheckBoxFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'My Email',bounds: { X: 146, Y: 850, Width: 200, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'My Phone',bounds: { X: 482, Y: 850, Width: 200, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('SignatureField', {name: 'Sign',bounds: { X: 57, Y: 923, Width: 200, Height: 43 },} as SignatureFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Month',bounds: { X: 386, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Date',bounds: { X: 434, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.addFormField('Textbox', {name: 'DOS Year',bounds: { X: 482, Y: 923, Width: 35, Height: 24 },} as TextFieldSettings);
- this.pdfviewerControl?.formDesignerModule.deleteFormField(this.pdfviewerControl.formFieldCollections[0]);
- }
-
- ngOnInit(): void {
- }
-}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/deleteformfield-cs1/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file:
-`public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'`;
-Within the template, configure the PDF Viewer by adding the `[serviceUrl]='service'` attribute inside the div element.
-
-{% previewsample "/document-processing/samples/pdfviewer/angular/deleteformfield-cs1" %}
-
-The following code illustrates how to delete a signature from the signature field using the `retrieveFormFields` and `clearFormFields` APIs.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
-//Event triggers while clicking the Remove Signature button.
-removeSignature() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- var forms = viewer.retrieveFormFields();
- //API to remove a signature from the signature field.
- viewer.clearFormFields(forms[8]);
-}
-
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Form%20fields/Delete%20signature%20programmatically%20from%20signature%20field)
-
-## Saving the form fields
-
-Selecting the Download icon on the toolbar saves the form fields in the exported PDF without modifying the original document. See the following GIF for reference.
-
-
-
-You can invoke the print action using the following code snippet:
-
-```html
-
-
-```
-
-## Printing the form fields
-
-Selecting the Print icon on the toolbar prints the PDF with the added form fields. This action does not modify the original document. See the following GIF for reference.
-
-
-
-You can invoke the print action using the following code snippet:
-
-```html
-
-
-```
-
-## Open the existing PDF document
-
-Open a PDF that already contains form fields by clicking the Open icon on the toolbar. See the following GIF for reference.
-
-
-
-## Validate form fields
-
-TForm fields are validated when enableFormFieldsValidation is set to true and the validateFormFields event is handled. The event triggers during download or print if required fields are not filled. The non-filled fields are available in the nonFillableFields property of the event arguments.
-
-Add the following code to validate form fields:
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-```typescript
-
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService, FormDesignerService,
- FormFieldsService, LoadEventArgs, TextFieldSettings
- } from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- // Specifies the template string for the PDF Viewer component.
- template: `
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, TextSelectionService, PrintService,
- AnnotationService, FormDesignerService, FormFieldsService]
-})
-export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl: PdfViewerComponent;
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-
- public validateFormFields(e: ValidateFormFieldsArgs): void {
- this.e.nonFillableFields;
- }
-}
-
-```
-{% endhighlight %}
-{% endtabs %}
-## Export and import form fields
-
-The PDF Viewer component supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods in the following formats:
-
-- FDF
-- XFDF
-- JSON
-- XML
-
-### Export and import as FDF
-
-Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
-
-* The first one must be the destination path for the exported data. If path is not specified, it will ask for the location while exporting.
-* The second parameter should be the format type of the form data.
-
-The following example exports and imports form field data as FDF.
-
-```html
-
-
-
-
-```
-
-```typescript
-// Event triggers on the Export FDF button click.
-OnExportFdf() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Fdf);
-}
-
-// Event triggers on the Import FDF button click.
-OnImportFdf() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
- viewer.importFormFields('File', FormFieldDataFormat.Fdf);
-}
-```
-
-### Export and import as XFDF
-
-The following example exports and imports form field data as XFDF.
-
-```html
-
-
-
-
-```
-
-```typescript
-// Event triggers on the Export XFDF button click.
-OnExportXfdf() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Xfdf);
-}
-
-// Event triggers on the Import XFDF button click.
-OnImportXfdf() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
- viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
-}
-```
-
-### Export and import as JSON
-
-The following example exports and imports form field data as JSON.
-
-```html
-
-
-
-
-```
-
-```typescript
-// Event triggers on the Export JSON button click.
-OnExportJson() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Json);
-}
-
-// Event triggers on the Import JSON button click.
-OnImportJson() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
- viewer.importFormFields('File', FormFieldDataFormat.Json);
-}
-```
-
-### Export and import as Object
-
-The PDF Viewer component supports exporting the form field data as an object and importing that data back into the current PDF document.
-
-The following code shows how to export the form field data as an object and import the form field data from that object into the current PDF document via a button click.
-
-```html
-
-
-
-
-```
-
-```typescript
-var exportedData;
-
-// Event triggers on the Export Object button click.
-exportDataAsObject() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // Export the form fields data to an FDF object.
- exportedData = viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf);
- //// Export the form fields data to an XFDF object.
- //exportedData = viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf);
- //// Export the form fields data to an JSON object.
- //exportedData = viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json);
-}
-
-// Event triggers on Import Data button click.
-importData() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // Import the form fields data from the FDF object into the current PDF document.
- viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf);
- //// Import the form fields data from the XFDF object into the current PDF document.
- //viewer.importFormFields(exportedData, FormFieldDataFormat.Xfdf);
- //// Import the form fields data from the JSON object into the current PDF document.
- //viewer.importFormFields(exportedData, FormFieldDataFormat.Json);
-}
-```
-
-### Export and import as XML
-
-The following example exports and imports form field data as XML.
-
-```html
-
-
-
-
-```
-
-```typescript
-// Event triggers on the Export Xml button click.
-OnExportXml() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Xml);
-}
-
-// Event triggers on the Import Xml button click.
-OnImportXml() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
- viewer.importFormFields('File', FormFieldDataFormat.Xml);
-}
-```
-
-## Form field properties
-
-Form field properties allow customization and interaction with fields embedded in PDF documents. The following sections outline the supported field types and their configurable settings.
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-### Signature and initial fields settings
-
-Use the updateFormField method to modify form fields programmatically.
-
-The following code example explains how to update the signature field properties on a button click.
-
-```html
-
-
-
-```
-
-```typescript
- // Event triggers on the Update Properties button click.
- updateProperties() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Initial',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Initial',
- thickness: 4
- });
-}
-
-```
-
-The following code shows how to configure default properties for a signature field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-{% endhighlight %}
-
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
- // Properties to customize the signature field settings
- public signatureFieldSettings = {
- // Set the name of the form field element.
- name: 'Signature',
- // Specify whether the signature field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the signature field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Signature',
- // Set the thickness of the signature field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specify the properties of the signature Dialog Settings in the signature field.
- signatureDialogSettings: {
- displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
- hideSaveSignature: false,
- },
- // Specify the properties of the signature indicator in the signature field.
- signatureIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Signature Field',
- color: 'white'
- }
- };
-
-```
-
-
-
-The following code shows how to configure default properties for an initial field added from the Form Designer toolbar.
-
-```typescript
- // Properties to customize the initial field settings
- public initialFieldSettings = {
- // Set the name of the form field element.
- name: 'Initial',
- // Specify whether the initial field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the initial field.
- isPrint: true,
- // Set the text to be displayed as tooltip.
- tooltip: 'Initial',
- // Set the thickness of the initial field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specify the properties of the initial indicator in the initial field.
- initialIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Initial Field',
- color: 'white',
- },
- // Specify the properties of the initial Dialog Settings in the intial field.
- initialDialogSettings: {
- displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
- hideSaveSignature: false,
- },
- };
-
-```
-
-
-
-### Textbox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates Textbox field properties on a button click.
-
-```html
-
-
-
-```
-
-```typescript
- // Event triggers on the Update Properties button click.
- updateProperties() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Textbox',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Textbox',
- thickness: 4,
- value:'Textbox',
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- maxLength: 0,
- isMultiline: false,
- bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
- });
- }
-
-```
-
-The following code shows how to configure default properties for a Textbox field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-{% endhighlight %}
-
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
- // Properties to customize the Textbox field settings
- public textFieldSettings = {
- // Set the name of the form field element.
- name: 'Textbox',
- // Specify whether the Textbox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the Textbox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Textbox',
- // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'Textbox',
- // Set the font family of the textbox field.
- fontFamily: 'Courier',
- // Set the font size of the textbox field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the textbox field.
- color: 'black',
- // Set the border color of the textbox field.
- borderColor: 'black',
- // Set the background color of the textbox field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the maximum character length.
- maxLength: 0,
- // Allows multiline input in the text field. FALSE, by default.
- isMultiline: false
- };
-
-```
-
-
-
-### Password field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates Password field properties on a button click.
-
-```html
-
-
-
-```
-
-```typescript
-
- // Event triggers on the Update Properties button click.
- updateProperties() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Password',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Password',
- thickness: 4,
- value:'Password',
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- maxLength: 0,
- bounds: { X: 148, Y: 229, Width: 150, Height: 24 }
- });
- }
-
-```
-
-The following code shows how to configure default properties for a Password field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-{% endhighlight %}
-
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
- // Properties to customize the Password field settings
- public passwordFieldSettings = {
- // Set the name of the form field element.
- name: 'Password',
- // Specify whether the Password field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the Password field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Password',
- // Set the thickness of the Password field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'Password',
- // Set the font family of the Password field.
- fontFamily: 'Courier',
- // Set the font size of the Password field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the Password field.
- color: 'black',
- // Set the border color of the Password field.
- borderColor: 'black',
- // Set the background color of the Password field.
- backgroundColor: 'white',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the maximum character length.
- maxLength: 0,
- };
-
-```
-
-
-
-### CheckBox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates CheckBox field properties on a button click.
-
-```html
-
-
-
-```
-
-```typescript
-
- // Event triggers on the Update Properties button click.
- updateProperties() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'CheckBox',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'CheckBox',
- thickness: 4,
- isChecked: true,
- backgroundColor: 'white',
- borderColor: 'black',
- value: 'CheckBox',
- });
- }
-
-```
-
-The following code shows how to configure default properties for a CheckBox field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-{% endhighlight %}
-
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
- // Properties to customize the CheckBox field settings
- public checkBoxFieldSettings = {
- // Set the name of the form field element.
- name: 'CheckBox',
- // Specify whether the CheckBox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the CheckBox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'CheckBox',
- // Set the thickness of the CheckBox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies whether the check box is in checked state or not.
- isChecked: true,
- // Set the background color of the check box in hexadecimal string format.
- backgroundColor: 'white',
- // Set the border color of the check box field.
- borderColor: 'black',
- // Set the value of the form field element.
- value: 'CheckBox'
- };
-
-```
-
-
-
-### RadioButton field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates RadioButton field properties on a button click.
-
-```html
-
-
-
-```
-
-```typescript
-
- // Event triggers on the Update Properties button click.
- updateProperties() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'RadioButton',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'RadioButton',
- thickness: 4,
- isSelected: true,
- backgroundColor: 'white',
- borderColor: 'black',
- value: 'RadioButton'
- });
- }
-
-```
-
-The following code shows how to configure default properties for a RadioButton field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-{% endhighlight %}
-
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
- // Properties to customize the RadioButton field settings
- public radioButtonFieldSettings = {
- // Set the name of the form field element.
- name: 'RadioButton',
- // Specify whether the RadioButton field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the RadioButton field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'RadioButton',
- // Set the thickness of the RadioButton field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies whether the radio button is in checked state or not.
- isSelected: true,
- // Set the background color of the radio button in hexadecimal string format.
- backgroundColor: 'white',
- // Set the border color of the radio button field.
- borderColor: 'black',
- // Set the value of the form field element.
- value: 'RadioButton'
- };
-
-```
-
-
-
-### ListBox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates ListBox field properties on a button click.
-
-```html
-
-
-
-```
-
-```typescript
-
- // Event triggers on the Update Properties button click.
- updateProperties() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- var formField = viewer.retrieveFormFields();
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'ListBox',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'ListBox',
- thickness: 4,
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- options: customOptions,
- });
- }
-
-```
-
-The following code shows how to configure default properties for a ListBox field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-{% endhighlight %}
-
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
- // Properties to customize the ListBox field settings
- public listBoxFieldSettings = {
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- // Set the name of the form field element.
- name: 'ListBox',
- // Specify whether the ListBox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the ListBox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'ListBox',
- // Set the thickness of the ListBox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'ListBox',
- // Set the font family of the ListBox field.
- fontFamily: 'Courier',
- // Set the font size of the ListBox field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the ListBox field.
- color: 'black',
- // Set the border color of the ListBox field.
- borderColor: 'black',
- // Set the background color of the ListBox field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the listbox items.
- options: customOptions
- };
-
-```
-
-
-
-### DropDown field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates DropDown field properties on a button click.
-
-```html
-
-
-
-```
-
-```typescript
-
- // Event triggers on the Update Properties button click.
- updateProperties() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- var formField = viewer.retrieveFormFields();
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'DropDown',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'DropDown',
- thickness: 4,
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- options: customOptions,
- });
- }
-
-```
-
-The following code shows how to configure default properties for a DropDown field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-{% endhighlight %}
-
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
-
- // Properties to customize the DropDown field settings
- public DropdownFieldSettings = {
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- // Set the name of the form field element.
- name: 'DropDown',
- // Specify whether the DropDown field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the DropDown field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'DropDown',
- // Set the thickness of the DropDown field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'DropDown',
- // Set the font family of the DropDown field.
- fontFamily: 'Courier',
- // Set the font size of the DropDown field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the DropDown field.
- color: 'black',
- // Set the border color of the DropDown field.
- borderColor: 'black',
- // Set the background color of the DropDown field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the DropDown items.
- options: customOptions
- };
-
-```
-
-
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-with-user-interface-interaction.md
deleted file mode 100644
index c41088bf8d..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-with-user-interface-interaction.md
+++ /dev/null
@@ -1,150 +0,0 @@
----
-layout: post
-title: Design form fields in the Angular PDF Viewer component | Syncfusion
-description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion Angular PDF Viewer component.
-platform: document-processing
-control: Create with user interface interaction
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Create form fields with UI interaction for Angular
-
-The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. Supported form field types include:
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-## Enable or Disable form designer toolbar
-
-Inject the FormDesigner module and set enableFormDesignerToolbar to true to display the Form Designer icon on the toolbar. The default value is true. Use the following code to enable the toolbar option.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService, FormDesignerService,
- FormFieldsService
- } from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- // Specifies the template string for the PDF Viewer component.
- template: `
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, TextSelectionService, PrintService,
- AnnotationService, FormDesignerService, FormFieldsService]
-})
-export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl: PdfViewerComponent;
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
- ngOnInit(): void {
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add the form field dynamically
-
-Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
-
-
-
-## Drag the form field
-
-Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
-
-
-
-## Resize the form field
-
-Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
-
-
-
-## Edit or Update the form field dynamically
-
-Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
-
-
-
-
-
-
-
-## Clipboard operation with form field
-
-The PDF Viewer supports clipboard operations such as cut, copy, and paste for form fields. Right-click a form field to open the context menu and choose the desired clipboard action. The following image shows the available options.
-Undo and redo actions are supported for runtime changes made to form fields. Use the following code to perform undo and redo operations.
-
-
-## Undo and Redo
-
-We provided support to undo/redo the Form Field actions that are performed at runtime. Use the following code example to perform undo/redo actions.
-
-```html
-
-
-```
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/angular/form-designer/form-field-events.md
deleted file mode 100644
index 7834326b07..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/form-field-events.md
+++ /dev/null
@@ -1,212 +0,0 @@
----
-layout: post
-title: Form Field Events | Syncfusion
-description: Learn here all about different form field in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# PDF Viewer Form Field events in Angular
-
-The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are:
-
-| Form Field events | Description |
-|---|---|
-| [formFieldAdd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldAddArgs/) | Event trigger when a form field is added.|
-| [formFieldClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldClickArgs/) | Events trigger when the form field is selected.|
-| [formFieldDoubleClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldDoubleClickArgs/) | Events trigger when the form field is double-clicked.|
-| [formFieldFocusOut](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) | Events trigger when focus out from the form fields.|
-| [formFieldMouseLeave](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) | Events trigger when the mouse cursor leaves the form field.|
-| [formFieldMouseOver](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMouseoverArgs/) | Events trigger when the mouse cursor is over a form field.|
-| [formFieldMove](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMoveArgs/) | Events trigger when a form field is moved.|
-| [formFieldPropertiesChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) | Events trigger when a property of form field is changed.|
-| [formFieldRemove](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldRemoveArgs/) | Events trigger when a form field is removed.|
-| [formFieldResize](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldResizeArgs/) | Events trigger when a form field is resized.|
-| [formFieldSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldSelectArgs/) | Events trigger when a form field is selected.|
-| [formFieldUnselect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldUnselectArgs/) | Events trigger when a form field is unselected.|
-| [validateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/validateFormFieldsArgs/) | Events trigger when validation is failed.|
-
-## formFieldAdd event
-
-The [formFieldAdd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldAddArgs/) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldaddevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldaddevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldClick event
-
-The [formFieldClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldClickArgs/) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldclickevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldclickevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldDoubleClick event
-
-The [formFieldDoubleClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldDoubleClickArgs/) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfielddoubleclickevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfielddoubleclickevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldFocusOut event
-
-The [formFieldFocusOut](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldfocusoutevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldfocusoutevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMouseLeave event
-
-The [formFieldMouseLeave](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldmouseleaveevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldmouseleaveevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMouseOver event
-
-The [formFieldMouseOver](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMouseoverArgs/) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldmouseoverevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldmouseoverevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMove event
-
-The [formFieldMove](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMoveArgs/) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldmousemoveevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldmousemoveevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldPropertiesChange event
-
-The [formFieldPropertiesChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldpropertieschangeevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldpropertieschangeevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldRemove event
-
-The [formFieldRemove](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldRemoveArgs/) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldremoveevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldremoveevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldResize event
-
-The [formFieldResize](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldResizeArgs/) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldresizeevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldresizeevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldSelect event
-
-The [formFieldSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldSelectArgs/) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldselectevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldselectevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldUnselect event
-
-The [formFieldUnselect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldUnselectArgs/) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldunselectevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldunselectevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-## validateFormFields event
-
-The [validateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/validateFormFieldsArgs/) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
-
-{% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldvalidationevent-cs2/src/app/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/pdfviewer/angular/formfieldvalidationevent-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
-
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/custom-data.md
new file mode 100644
index 0000000000..9a81e91a9d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/custom-data.md
@@ -0,0 +1,327 @@
+---
+layout: post
+title: Add custom data to form fields in Angular Pdf Viewer | Syncfusion
+description: Learn how to attach, update, and read custom Data on PDF form fields using the Form Designer UI and APIs in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Add Custom Data to PDF Form Fields in Angular PDF Viewer
+
+The **Syncfusion Angular PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
+
+The custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified.
+
+This page explains how to:
+- [Add custom data when creating form fields](#add-custom-data-while-creating-pdf-form-fields)
+- [Define default custom data for fields created using the UI](#set-default-custom-data-for-pdf-form-fields-added-using-ui)
+- [Update or replace custom data for existing fields](#update-or-replace-pdf-form-field-custom-data)
+- [Read custom data from form fields](#read-custom-data-from-pdf-form-fields)
+- [Apply best practices when using custom data](#best-practices)
+
+**Key Points**
+- customData is a **free form object**; you control its structure.
+- Use only **serializable values** such as objects, arrays, strings, numbers, and booleans.
+- Custom data does not affect the field appearance or behavior unless consumed by your application logic.
+
+## Add Custom Data While Creating PDF Form Fields
+
+You can attach custom data at the time of field creation by passing a **customData** object in the settings parameter of **addFormField()**.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ this.pdfviewer.documentLoad = () => {
+ const meta = { businessId: 'C-1024', tags: ['profile','kiosk'], requiredRole: 'admin' };
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 229, Width: 200, Height: 24 },
+ customData: meta
+ } as any);
+ };
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Set Default Custom Data for PDF Form Fields Added Using UI
+
+When users add form fields using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), you can define default customData so that newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as:
+
+- [textFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#textfieldsettings)
+- [passwordFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#passwordfieldsettings)
+- [checkBoxFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#checkboxfieldsettings)
+- [radioButtonFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings)
+- [listBoxFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#listboxfieldsettings)
+- [dropDownFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#dropdownfieldsettings)
+- [signatureFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#signaturefieldsettings)
+- [initialFieldSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#initialfieldsettings)
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ // ...viewer initialization as above...
+ // Example for texbox defaults
+ this.pdfviewer.textFieldSettings = {
+ name: 'Textbox',
+ customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
+ } as any;
+
+ // Example for checkbox defaults
+ this.pdfviewer.checkBoxFieldSettings = {
+ name: 'Checkbox',
+ customData: { consentType: 'marketing', defaultChecked: false }
+ } as any;
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Update or Replace PDF Form Field Custom Data
+
+You can modify the customData of an existing form field by using the [updateFormField()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfields) method. The field can be identified using either its object reference or field ID.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ // Retrieve existing fields
+ const fields = this.pdfviewer.retrieveFormFields();
+ const target = fields.find((f: any) => f.name === 'Email');
+
+ if (target) {
+ // Merge with existing customData to avoid overwriting
+ const merged = Object.assign({}, target.customData || {}, { updatedAt: Date.now(), verified: true });
+ this.pdfviewer.formDesignerModule.updateFormField(target, { customData: merged } as any);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Tip:**
+Merge new values with the existing customData object before calling [updateFormField()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data.
+
+## Read Custom Data from PDF Form Fields
+
+You can access the customData property from any form field at any point in your application flow, such as:
+- After the document is loaded
+- During save or submit operations
+- While performing validation or conditional routing
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ this.pdfviewer.documentLoad = () => {
+ const fields = this.pdfviewer.retrieveFormFields();
+ fields.forEach((f: any) => {
+ console.log('Field:', f.name, 'customData:', f.customData);
+ // Example: route based on customData
+ if (f.customData && f.customData.requiredRole === 'admin') {
+ // mark field for special handling
+ }
+ });
+ };
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Best Practices
+
+- Treat customData as application metadata, not display data.
+- Use it to drive business rules, validation logic, and workflow decisions.
+- Keep the data minimal and structured for easy processing.
+- When cloning or copying form fields, ensure customData is copied or updated as required.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-constrain.md
new file mode 100644
index 0000000000..1d8459f2a5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-constrain.md
@@ -0,0 +1,516 @@
+---
+layout: post
+title: PDF form field flags in the Angular PDF Viewer | Syncfusion
+description: Learn how to apply isReadOnly, isRequired, and isPrint flags to PDF form fields in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# PDF form field flags in Angular PDF Viewer
+
+The Syncfusion **Angular PDF Viewer** allows you to control how users interact with form fields and how those fields behave during validation and printing by applying **form field flags**. These flags define whether a form field can be modified, whether it is mandatory, and whether it appears in printed output.
+
+This topic explains:
+- [Supported form field flags](#supported-pdf-form-field-flags)
+- [How each constraint affects field behavior](#key-actions)
+- [How to apply flags during field creation](#apply-pdf-form-field-flags-using-the-ui)
+- [How to update flags on existing fields](#update-flags-on-existing-fields-programmatically)
+- [How flags work with validation and printing](#control-print-behavior)
+
+## Supported PDF Form Field Flags
+
+The following flags are supported in the PDF Viewer:
+
+- [isReadOnly](#make-fields-read-only)
+ Prevents users from modifying the form field in the UI while still allowing updates through APIs.
+
+- [isRequired](#mark-fields-as-required)
+ Marks the form field as mandatory and includes it in form field validation.
+
+- [isPrint](#control-print-behavior)
+ Controls whether the form field appears when the document is printed.
+
+## Key Actions
+
+### Make Fields Read Only
+Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre filled or calculated values that should not be changed by the user.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ //Use this setting to make Read-only as Default for new Textbox fields
+ //this.pdfviewer.textFieldSettings = { isReadOnly: true };
+
+ this.pdfviewer.documentLoad = () => {
+ // Read-only Textbox
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ isReadOnly: true,
+ value: 'EMP-0001'
+ } as any);
+
+ // Read-only Signature field
+ this.pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApplicantSign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ isReadOnly: true,
+ tooltip: 'Sign to accept the terms'
+ } as any);
+ };
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Mark Fields as Required
+Use the **isRequired** property to mark form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading.
+
+- Enable validation using [enableFormFieldsValidation](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableformfieldsvalidation)
+- [Validate fields](./form-validation) using [validateFormFields()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#validateformfields)
+
+If required fields are empty, validation can prevent further actions.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ // 1) Default for new Textbox fields
+ this.pdfviewer.textFieldSettings = { isRequired: true };
+
+ // 2) Validation wiring
+ this.pdfviewer.enableFormFieldsValidation = true;
+ this.pdfviewer.validateFormFields = (args: any) => {
+ // Triggers when required fields are empty on submit/validate
+ if (args && args.formField && args.formField.length > 0) {
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ }
+ };
+
+ // 3) Creation (add a Textbox form field once the document is loaded)
+ this.pdfviewer.documentLoad = () => {
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required'
+ } as any);
+ };
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Control Print Behavior
+Use the **isPrint** property to control whether a form field appears in the printed output of the PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ // 1) Default for new signature fields
+ this.pdfviewer.signatureFieldSettings = { isPrint: false };
+
+ // 2) Creation (do not print a signature field)
+ this.pdfviewer.documentLoad = () => {
+ this.pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApplicantSign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ isPrint: false
+ } as any);
+
+ // 3) Update existing field (toggle to print)
+ const sign = this.pdfviewer.formFieldCollections.find((f: any) => f.name === 'ApplicantSign');
+ if (sign) {
+ this.pdfviewer.formDesignerModule.updateFormField(sign, { isPrint: true } as any);
+ }
+ };
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> Printing can be triggered programmatically using **pdfviewer.print()**. Form fields with **isPrint: false** are excluded from the printed output.
+
+## Apply PDF Form Field Flags Using the UI
+
+**Steps**
+1. Enable **Form Designer** mode in the PDF Viewer.
+2. Select an existing form field on the PDF page.
+3. The **Right click To open context menu - > Properties** popover is displayed.
+4. Configure the required constraint options.
+5. Click “Ok” and Close the properties popover to apply the changes.
+
+Changes are reflected immediately in the viewer.
+
+[Applying form field flags using the UI](../../javascript-es6/images/formfields-flag.gif)
+
+## Apply PDF Form Field Flags Programmatically
+
+You can apply or modify form field flags in the following ways.
+
+### Apply flags When Creating Fields
+Pass the flags properties in the settings object when creating form fields using **addFormField()**.
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ this.pdfviewer.documentLoad = () => {
+ // Read-only Textbox that is printed but not required
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ isReadOnly: true,
+ isRequired: false,
+ isPrint: true,
+ value: 'EMP-0001'
+ } as any);
+
+ // Required Signature field that is not included in print
+ this.pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApplicantSign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: false,
+ tooltip: 'Sign to accept the terms'
+ } as any);
+ };
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Update flags on Existing Fields programmatically
+Use the [updateFormField()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfields) method to modify constraint values on existing form fields.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ this.pdfviewer.documentLoad = () => {
+ // Add a sample textbox
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 }
+ } as any);
+
+ // Retrieve it and update constraint flags
+ const field = this.pdfviewer.formFieldCollections.find((f: any) => f.name === 'Email');
+ if (field) {
+ this.pdfviewer.formDesignerModule.updateFormField(field, {
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: true,
+ tooltip: 'Enter a valid email'
+ } as any);
+ }
+ };
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Set Default Flags for New PDF Form Fields
+You can configure default flag values so that form fields added using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar) automatically inherit them. This helps ensure consistent behavior for all newly created fields.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngAfterViewInit(): void {
+ // Textbox fields will be editable, required, and included in print by default
+ this.pdfviewer.textFieldSettings = {
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: true,
+ tooltip: 'Required field'
+ };
+
+ // Signature fields will be optional and hidden when printing
+ this.pdfviewer.signatureFieldSettings = {
+ isReadOnly: false,
+ isRequired: false,
+ isPrint: false,
+ tooltip: 'Sign if applicable'
+ };
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form Validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-designer.md
new file mode 100644
index 0000000000..a60e8b8a20
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-designer.md
@@ -0,0 +1,314 @@
+---
+layout: post
+title: Form Designer and Toolbar Customization in Angular | Syncfusion
+description: Learn here all about form designer and toolbar in Syncfusion Angular PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer in Angular PDF Viewer
+
+When **Form Designer mode** is enabled in the Syncfusion [Angular PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields.
+
+Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer.
+
+## Key Features
+
+**Add Form Fields**
+You can add the following form fields to the PDF:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+**Edit Form Fields**
+You can move, resize, align, distribute, copy, paste, and undo or redo changes to form fields.
+
+**Set Field Properties**
+You can configure field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read only state.
+
+**Control Field Behavior**
+You can enable or disable read only mode, show or hide fields, and control whether fields appear when printing the document.
+
+**Manage Form Fields**
+You can select, group or ungroup, reorder, and delete form fields as needed.
+
+**Save and Print Forms**
+Designed form fields can be saved into the PDF document and printed with their appearances.
+
+## Enable Form Designer
+
+To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements OnInit {
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {}
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Form Designer UI
+
+When [Form Designer mode](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [Angular PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.
+
+
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in Angular PDF Viewer documentation.
+
+## Form Designer Toolbar
+
+The **Form Designer toolbar** appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
+
+
+
+Use the following Code-snippet to enable Form Designer by injecting **Form Designer mode** Module.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements OnInit {
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {}
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in Angular PDF Viewer documentation](./manage-form-fields/create-form-fields).
+
+## Show or Hide the Built-in Form Designer Toolbar
+
+You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements.
+
+**Use this method to:**
+- Show the Form Designer toolbar when form design is required
+- Hide the toolbar to provide cleaner viewing experience
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import { PdfViewerComponent, PdfViewerModule, ToolbarService, FormDesignerService, FormFieldsService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+
+ `,
+ providers: [ToolbarService, FormFieldsService, FormDesignerService],
+})
+export class AppComponent {
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ showDesigner(): void {
+ if (this.pdfviewer) { this.pdfviewer.isFormDesignerToolbarVisible = true; }
+ }
+ hideDesigner(): void {
+ if (this.pdfviewer) { this.pdfviewer.isFormDesignerToolbarVisible = false; }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize the Built-in Form Designer Toolbar
+
+You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesignertoolbaritem) property.
+
+This customization helps you limit the available tools and simplify the user interface.
+
+**Key Points**
+- Include only the toolbar items you need, in the exact order you specify.
+- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, FormFieldsService, FormDesignerService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+ `,
+ providers: [ToolbarService, FormFieldsService, FormDesignerService],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+ public toolbarSettings: object = {
+ formDesignerToolbarItems: [
+ 'TextboxTool',
+ 'PasswordTool',
+ 'CheckBoxTool',
+ 'RadioButtonTool',
+ 'DropdownTool',
+ 'ListboxTool',
+ 'DrawSignatureTool',
+ 'DeleteTool',
+ ],
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Move, Resize, and Edit Form Fields
+
+You can move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer.
+
+- Move a field by selecting it and dragging it to the required position.
+
+- Resize a field using the handles displayed on the field boundary.
+
+
+
+- Edit a field by selecting it to open the Form Field Properties popover. The popover allows you to modify the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed.
+For more information, see Editing Form Fields
+
+## Deleting Form Fields
+
+You can remove a form field from the PDF document by selecting the field and using one of the following methods:
+- Click the `Delete option` in the Form Designer UI.
+- Press the `Delete key` on the keyboard after selecting the form field.
+
+The selected form field and its associated widget annotation are permanently removed from the page.
+For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields)
+
+## See Also
+
+- [Filling PDF Forms](./form-filling)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/style-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Grouping form fields](./group-form-fields)
+- [Form Constrains](./form-constrain)
+- [Form Validation](./form-validation)
+- [Custom Data](./custom-data)
+- [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields)
+- [Form field events](./form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-field-events.md
new file mode 100644
index 0000000000..e38c5104fd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-field-events.md
@@ -0,0 +1,153 @@
+---
+layout: post
+title: Form Field Events in Angular PDF Viewer control | Syncfusion
+description: Learn here all about different form field in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Viewer Form Field Events in Angular
+
+The Syncfusion **Angular PDF Viewer** provides a comprehensive set of **form field events** that allow developers to track user interactions, respond to form changes, and implement custom business logic. These events can be used for scenarios such as [validation](./form-validation), **UI updates**, **logging**, and **workflow automation**.
+
+Form field events are triggered during actions such as adding, selecting, modifying, moving, resizing, and removing form fields.
+
+## Supported PDF Form Field Events
+
+The following table lists all supported form field events and their descriptions:
+
+| Form Field events | Description |
+|---|---|
+| [formFieldAdd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldAddArgs) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. |
+| [formFieldClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldClickArgs) | Fired when a form field is clicked in the viewer. |
+| [formFieldDoubleClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldDoubleClickArgs) | Fired when a form field is double clicked. |
+| [formFieldFocusOut](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldFocusOutEventArgs) | Triggered when a form field loses focus after editing. |
+| [formFieldMouseLeave](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMouseLeaveArgs) | Fired when the mouse pointer leaves a form field. |
+| [formFieldMouseOver](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMouseoverArgs) | Fired when the mouse pointer moves over a form field. |
+| [formFieldMove](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldMoveArgs) | Triggered when a form field is moved to a new position. |
+| [formFieldPropertiesChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) | Fired when any form field property changes, such as font, color, or constraint values. |
+| [formFieldRemove](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldRemoveArgs) | Triggered when a form field is deleted from the document. |
+| [formFieldResize](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldResizeArgs) | Fired when a form field is resized. |
+| [formFieldSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldSelectArgs) | Fired when a form field is selected in the Form Designer. |
+| [formFieldUnselect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formFieldUnselectArgs) | Fired when a previously selected form field is unselected. |
+| [validateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/validateFormFieldsArgs) | Fired when form field validation fails during print or download actions. |
+
+**Common Use Cases**
+
+Form field events can be used to:
+- Validate form data before printing or downloading
+- Track user interaction with form fields
+- Update UI elements dynamically
+- Log form changes for auditing
+- Trigger workflow actions based on field changes
+- Enforce business rules during form editing
+
+## Handle PDF Form Field Events
+
+You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+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: `
+
+
+
+
+ `,
+ 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);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**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](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Field Flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-fields-api.md
new file mode 100644
index 0000000000..9e0ac9a2af
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-fields-api.md
@@ -0,0 +1,635 @@
+---
+layout: post
+title: Form Fields API in Angular PDF Viewer | Syncfusion
+description: Learn How to use Form Fields API to enable, update, retrieve and clear in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Fields API in Angular PDF Viewer
+
+The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:
+
+| API | Description |
+|---|---|
+| [updateFormFieldsValue](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfieldsvalue) | Updates the value for one or more form fields.|
+| [updateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfields) | Updates the properties of one or more form fields.|
+| [retrieveFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#retrieveformfields) | Retrieves all form fields or by specific criteria.|
+| [resetFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#resetformfields) | Resets the specified or all form fields to their default values.|
+| [importFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importformfields) | Imports values and states for form fields from a JSON object or file stream.|
+| [focusFormField](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#focusformfield) | Sets focus to a form field by name or ID.|
+| [exportFormFieldsAsObject](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportformfieldsasobject) | Exports form fields as a JSON object.|
+| [exportFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportformfields) | Exports form fields as a downloadable file.|
+| [clearFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#clearformfields) | Clears values of specified or all form fields without removing them.|
+| [isFormFieldDocument](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#isformfielddocument) | Indicates whether the loaded document contains form fields.|
+| [isFormDesignerToolbarVisible](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) | Gets whether the Form Designer toolbar is currently visible.|
+| [formFieldCollections](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections) | Gets the collection of current form fields with their properties.|
+| [enableFormFieldsValidation](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) | Enables or disables form field validation.|
+| [enableFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableformfields) | Enables or disables interaction with form fields.|
+| [enableFormDesignerToolbar](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableformdesignertoolbar) | Shows or hides the Form Designer toolbar.|
+
+## updateFormFieldsValue
+
+Updates the value of one or more form fields programmatically.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+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: `
+
+ `,
+ 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;
+
+ showFormDesigner(): void {
+ if (this.pdfviewer) this.pdfviewer.enableFormDesignerToolbar = true;
+ }
+
+ hideFormDesigner(): void {
+ if (this.pdfviewer) this.pdfviewer.enableFormDesignerToolbar = false;
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields Validation](./form-validation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-filling.md
new file mode 100644
index 0000000000..4931426ed9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-filling.md
@@ -0,0 +1,282 @@
+---
+layout: post
+title: Form filling in Angular PDF Viewer Control | Syncfusion
+description: Learn to view, fill, export, and import form fields in Syncfusion Angular PDF Viewer, including disabling interaction and handling signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Filling PDF Forms in Angular PDF Viewer
+
+The Syncfusion PDF Viewer supports three types of form-filling:
+
+1. [Filling Form Fields Programmatically](#fill-pdf-forms-programmatically)
+
+ You can fill or update PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfieldsvalue) APIs. This approach is useful when form data needs to be set dynamically based on application logic.
+
+2. [Form Filling Through User Interface](#fill-pdf-forms-through-the-user-interface)
+
+ Users can fill in PDF form fields directly through the PDF Viewer user interface by typing text, selecting options, or interacting with supported form elements.
+
+3. [Importing Form Field Data](#fill-pdf-forms-through-import-data)
+
+ The PDF Viewer allows you to import form field data into an existing PDF document. This enables pre filled forms using external data sources.
+
+## Fill PDF forms programmatically
+
+You can update the values of PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction.
+
+The following example demonstrates how to update PDF form field values programmatically:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerComponent,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer') pdfviewer!: PdfViewerComponent;
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {}
+
+ fillForm(): void {
+ const fields =
+ this.pdfviewer?.retrieveFormFields?.() || (this.pdfviewer as any).formFieldCollection || [];
+ const field = fields.find((f: any) => f?.name === 'name') || fields[0];
+
+ if (field) {
+ field.value = 'John Doe';
+ field.tooltip = 'First';
+ this.pdfviewer.updateFormFieldsValue(field);
+ } else {
+ console.warn('No form fields available to update.');
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Fill PDF forms through the User Interface
+
+The Syncfusion PDF Viewer allows users to fill PDF form fields directly through the user interface without using code. Users can click on form fields and enter or select values based on the field type.
+
+
+
+The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values can be edited at any time, and the entered data is retained during the viewing session.
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
+
+## Fill PDF forms through Import Data
+
+The Syncfusion PDF Viewer allows you to import form field data into an existing PDF document using the [importFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importformfields) API. This feature enables you to pre-fill form fields using data from an external source without requiring manual user input.
+
+Imported form field data is automatically mapped to the corresponding form fields in the PDF document based on the field names. Once the data is imported, the populated values are displayed in the PDF Viewer and can be edited through the user interface if required.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerComponent,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer') pdfviewer!: PdfViewerComponent;
+ 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';
+
+ ngOnInit(): void {}
+
+ importJson(): void {
+ this.pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+For more details, see [Import Form Data](./import-export-form-fields/import-form-fields).
+
+## How to get the filled data and store it to a backing system
+
+You can export the filled form field data from the PDF Viewer and store it in a backing system such as a database or file storage. The exported data can later be imported to restore the form state.
+
+For more details, see [Export Form Data](./import-export-form-fields/export-form-fields).
+
+## How to Validate Form Fields using `validateFormFields` Event
+
+The [validateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#validateformfields) event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the [retrieveFormFields()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#retrieveformfields) API to get all the form fields and check them one by one to see if any form fields values are empty.
+
+This validation applies to all form field types in the PDF Viewer. A textbox is empty if no text is entered, a list box or dropdown is empty if no item is selected, a signature or initial field is empty if the user has not signed, and radio buttons or checkboxes are empty if none are chosen.
+By enabling [enableFormFieldsValidation](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) and wiring the event, you can go through each field and stop the action if required fields are not filled.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerComponent,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+import { TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer') pdfviewer!: PdfViewerComponent;
+ 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';
+
+ ngOnInit(): void {}
+
+ onDocumentLoad(): void {
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required',
+ } as TextFieldSettings);
+
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Phone',
+ bounds: { X: 146, Y: 300, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Phone number is required',
+ } as TextFieldSettings);
+ }
+
+ onValidateFormFields(args: any): void {
+ const fields = this.pdfviewer.retrieveFormFields();
+
+ fields.forEach((field: any) => {
+ if ((field.name === 'Email' || field.name === 'Phone') && !field.value) {
+ alert(field.name + ' field cannot be empty.');
+ args.isFormSubmitCancelled = true;
+ }
+ });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Edit form fields](./manage-form-fields/edit-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-validation.md
new file mode 100644
index 0000000000..3003624a8b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/form-validation.md
@@ -0,0 +1,162 @@
+---
+layout: post
+title: Form validation in the Angular PDF Viewer component | Syncfusion
+description: Learn how to enable built-in form field validation and validate missing required fields in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Validate PDF Form Fields in Angular PDF Viewer
+
+The Syncfusion **Angular PDF Viewer** provides built in support for **validating form fields** before users perform actions such as **printing**, **downloading**, or **submitting** a PDF document. Validation ensures that all required form fields are filled before allowing these actions to complete.
+This feature helps enforce data completeness and improves the reliability of collected form data.
+
+## How PDF Form Validation Works
+
+Form field validation follows this flow:
+- Enable validation using the [enableFormFieldsValidation](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property.
+- Handle the [validateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#validateformfields) event to determine which required fields are not filled.
+- When validation is enabled and a user attempts to print, download, or submit the document:
+ - The [validateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#validateformfields) event is triggered.
+ - Unfilled required fields are listed in args.nonFillableFields.
+ - You can cancel the action, show an error message, or move focus to an invalid field.
+
+## Enable PDF Form Field Validation
+
+To enable validation, set the [enableFormFieldsValidation](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#validateformfields) property to true and wire the validateFormFields event.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer') public pdfviewer: PdfViewerComponent;
+ public document: string = '';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+ public textFieldSettings: any = { isRequired: true };
+
+ ngOnInit(): void {
+ this.document = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ }
+
+ documentLoad(): void {
+ // Add a required textbox once the document is loaded
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required',
+ } as any);
+ }
+
+ onValidateFormFields(args: any): void {
+ // Triggers when required fields are empty on submit/validate
+ if (args && args.formField && args.formField.length > 0) {
+ // Example: prevent the pending action and notify the user
+ args.cancel = true;
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Mark Fields as Required
+
+Only fields marked as **required** participate in validation. Use the **isRequired** property when creating or updating a form field.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+// Creation of a required textbox (inside documentLoad) that blocks printing until it is filled.
+this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required'
+} as any);
+{% endhighlight %}
+{% endtabs %}
+
+## Handle PDF Form Validation Results
+
+In the [validateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#validateformfields) event, you can control the behavior when fields are missing. Typical actions include:
+- Cancel the print or download operation
+- Display an error message to the user
+- Set focus to the first unfilled required field
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+// Enable validation and handle the validateFormFields event in Angular
+this.pdfviewer.enableFormFieldsValidation = true;
+// Handler runs when required fields are missing; set args.cancel = true to prevent the action
+onValidate(args: any): void {
+ if (args && args.formField && args.formField.length > 0) {
+ args.cancel = true;
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Tips
+
+- Use isRequired to clearly mark mandatory fields.
+- Validation is triggered only during [print](../print), [download](../download), or **submit** actions.
+- For custom validation logic (such as validating an email format):
+ - Retrieve all form fields using [retrieveFormFields()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#retrieveformfields).
+ - Apply custom checks before allowing the action to proceed.
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form flags](./form-constrain)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/group-form-fields.md
new file mode 100644
index 0000000000..8d2d4d4b68
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/group-form-fields.md
@@ -0,0 +1,163 @@
+---
+layout: post
+title: Group form fields in the Angular PDF Viewer component | Syncfusion
+description: Learn how to group PDF form fields in the Syncfusion Angular PDF Viewer by assigning the same name to multiple widgets.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Group form fields in Angular PDF Viewer
+
+The Syncfusion **Angular PDF Viewer** allows you to **group multiple form fields into a single logical field** by assigning the **same Name** to them. Grouped form fields share their values and states automatically based on the field type. You can group form fields using the **Form Designer UI** or **programmatically using APIs**, making it easy to keep related fields synchronized across the PDF document.
+
+This page covers:
+- [How form field grouping works](#how-grouping-works)
+- [Field behavior based on type](#field-behavior-by-type)
+- [How to group form fields using the UI](#group-using-the-form-designer-ui)
+- [How to group form fields programmatically](#group-pdf-form-fields-programmatically)
+- [Related references and samples](#example-scenarios)
+
+
+## How grouping works
+
+In a PDF form, multiple PDF Form Fields can represent the same logical form field. When PDF Form Fields share the same **Name**, they are treated as a group and stay synchronized.
+
+## Field behavior by type
+
+- **Textbox and Password** — Text entered in one widget appears in all widgets with the same Name.
+- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same Name.
+- **RadioButton** — Widgets with the same Name form a radio group; only one option can be selected.
+- **ListBox and DropDown** — The selected value is shared across widgets with the same Name.
+- **Signature and Initial fields** — Applied signature/initial is mirrored across grouped widgets.
+
+N>Form field grouping is controlled by the **Name** property. The position of each widget is determined only by its bounds; grouping is not affected by location.
+
+## Group using the Form Designer UI
+
+**Steps**
+1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar).
+2. Add the form fields you want to group.
+3. Select a form field, open **Properties**, and set the **Name** value.
+4. Assign the same **Name** to all PDF Form Field that belong to the group.
+5. Apply the changes and verify that updates in one widget reflect in the others.
+
+
+
+
+
+## Group PDF Form Fields Programmatically
+
+You can also group form fields during creation by assigning the same **Name** through code.
+
+### Example Scenarios
+- Two textboxes named **EmployeeId** share the same value.
+- A radio button group named **Gender** allows single selection.
+- Two checkboxes named **Subscribe** share the checked state.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer') public pdfviewer: PdfViewerComponent;
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {}
+
+ documentLoad(): void {
+ // Textbox group: same name => mirrored value
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+ } as any);
+
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
+ } as any);
+
+ // Radio group: same name => exclusive selection
+ this.pdfviewer.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender',
+ bounds: { X: 148, Y: 289, Width: 18, Height: 18 },
+ isSelected: false
+ } as any);
+
+ this.pdfviewer.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender',
+ bounds: { X: 292, Y: 289, Width: 18, Height: 18 },
+ isSelected: false
+ } as any);
+
+ // CheckBox group: same name => mirrored checked state
+ this.pdfviewer.formDesignerModule.addFormField('CheckBox', {
+ name: 'Subscribe',
+ bounds: { X: 56, Y: 664, Width: 20, Height: 20 },
+ isChecked: false
+ } as any);
+
+ this.pdfviewer.formDesignerModule.addFormField('CheckBox', {
+ name: 'Subscribe',
+ bounds: { X: 242, Y: 664, Width: 20, Height: 20 },
+ isChecked: false
+ } as any);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/export-form-fields.md
new file mode 100644
index 0000000000..055879ebe8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/export-form-fields.md
@@ -0,0 +1,278 @@
+---
+layout: post
+title: Export form data in the Angular PDF Viewer component | Syncfusion
+description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion Angular PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Export PDF Form Data from Angular PDF Viewer
+
+The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
+
+- [FDF](#export-as-fdf)
+- [XFDF](#export-as-xfdf)
+- [JSON](#export-as-json)
+- [JavaScript Object](#export-as-object) (for custom persistence)
+
+## Available methods
+
+- [exportFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportformfields)(destination?, format) — Exports data to a file in the specified format.
+- [exportFormFieldsAsObject](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportformfieldsasobject)(format) — Exports data as a JavaScript object for custom handling.
+- [importFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) — Import data back into the PDF.
+
+## How to export
+
+Use [exportFormFields()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type.
+
+### Export as FDF
+The following example exports form field data as FDF.
+
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ exportFdf(): void {
+ // Destination is optional; if omitted the browser will prompt.
+ this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
+ }
+}
+{% endhighlight %}
+
+### Export as XFDF
+The following example exports form field data as XFDF.
+
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ exportXfdf(): void {
+ this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
+ }
+}
+{% endhighlight %}
+
+
+### Export as JSON
+The following example exports form field data as JSON.
+
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ exportJson(): void {
+ this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+ }
+}
+{% endhighlight %}
+
+### Export as Object
+
+Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to obtain form data as a JavaScript object for database or API integration.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ exportedData: object | undefined;
+
+ exportObj(): void {
+ this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
+ this.exportedData = data; // Persist or send to server
+ console.log('Exported object:', this.exportedData);
+ });
+ // Alternatives:
+ // this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...)
+ // this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...)
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Common Use Cases
+
+- Save user-entered data to your server without altering the original PDF.
+- Export as JSON for REST API integration.
+- Export as FDF/XFDF for compatibility with other PDF tools.
+- Export as Object to merge with app state or store securely.
+- Automate exports after [validation](../form-validation) using [validateFormFields()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#validateformfields)
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Import form fields](./import-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-export-events.md
new file mode 100644
index 0000000000..e2c1f58f0c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-export-events.md
@@ -0,0 +1,177 @@
+---
+layout: post
+title: Import/Export events in the Angular PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion Angular PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# PDF Form Import and Export Events in Angular
+
+Import/Export events let you **track and customize the entire life cycle** of form data being imported into or exported from the PDF Viewer.
+Use these events to:
+- Validate inputs before processing.
+- Show progress indicators.
+- Log audit trails.
+- Block operations based on business rules.
+
+Each event provides detailed context through typed event arguments such as [ImportStartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/importstarteventargs), [ImportSuccessEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/importsuccesseventargs), [ImportFailureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/importfailureeventargs), [ExportStartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/exportstarteventargs), [ExportSuccessEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/exportsuccesseventargs), and [ExportFailureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/exportfailureeventargs).
+
+## Import Events
+- [importStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importstart) — Fires when an import begins.
+- [importSuccess](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importsuccess) — Fires when form fields are successfully imported.
+- [importFailed](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importfailed) — Fires if the import fails.
+
+**Example: Handle Import Events**
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+ `,
+ 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';
+
+ onExportStart(args: any): void {
+ console.log('Export started', args);
+ // e.g. disable export UI
+ }
+
+ onExportSuccess(args: any): void {
+ console.log('Export success', args);
+ // e.g. enable UI, provide download link
+ }
+
+ onExportFailed(args: any): void {
+ console.error('Export failed', args);
+ // e.g. re-enable UI, notify user
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Key Notes
+- importStart, importSuccess, importFailed cover the full import life cycle.
+- exportStart, exportSuccess, exportFailed cover the full export life cycle.
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Import form fields](./import-form-fields)
+- [Export form fields](./export-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md
new file mode 100644
index 0000000000..16d056cd77
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md
@@ -0,0 +1,213 @@
+---
+layout: post
+title: Import form data in the Angular PDF Viewer component | Syncfusion
+description: Learn how to import PDF form field data (FDF, XFDF, JSON, and from an object) using the Syncfusion Angular PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import PDF Form Data into Angular PDF Viewer
+
+The **PDF Viewer** lets you import values into interactive form fields in the currently loaded PDF. You can import data from these formats:
+
+- [FDF](#import-as-fdf)
+- [XFDF](#import-xfdf)
+- [JSON](#import-json)
+
+## API to use
+- [importFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format)
+
+N>If you’re using a **server-backed viewer**, set serviceUrl before importing.
+
+### Import FDF
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+ FormFieldDataFormat,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ importFdf(): void {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ this.pdfviewer.importFormFields('File', FormFieldDataFormat.Fdf as any);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Import XFDF
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+ FormFieldDataFormat,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ importXfdf(): void {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ this.pdfviewer.importFormFields('File', FormFieldDataFormat.Xfdf as any);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Import JSON
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+ FormFieldDataFormat,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ importJson(): void {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ this.pdfviewer.importFormFields('File', FormFieldDataFormat.Json as any);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Common Use Cases
+
+- Pre-fill application forms from a database using JSON.
+- Migrate data from other PDF tools using FDF/XFDF.
+- Restore user progress saved locally or on the server.
+- Combine with validation to block print/download until required fields are completed.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Export form fields](./export-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create Edit form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/create-form-fields.md
new file mode 100644
index 0000000000..c2ecc2dad6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/create-form-fields.md
@@ -0,0 +1,741 @@
+---
+layout: post
+title: Create form fields in the Angular PDF Viewer | Syncfusion
+description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create PDF Form Fields in Angular
+
+You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/default) or dynamically using APIs.
+
+## Create Form Fields Using the Form Designer UI
+Use this approach when you want to design forms manually without writing code.
+
+**Steps:**
+
+1. Enable [Form Designer](../form-designer) mode in the PDF Viewer.
+2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
+3. Click on the PDF page to place the form field.
+4. Move or resize the field as required.
+5. Configure field properties using the **Properties** panel.
+
+
+
+## Add Form Fields Programmatically (API)
+
+Use this approach when you want to generate form fields dynamically based on data or application logic.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ onDocumentLoad(): void {
+ this.pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'First Name',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ pageNumber: 1,
+ isRequired: true,
+ tooltip: 'Enter your first name'
+ } as any);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Use programmatic creation when:**
+
+- Building dynamic forms
+- Pre-filling forms from databases
+- Automating form creation workflows
+
+## PDF Form Field Types and How to Add Them
+Each field can be added via the **Form Designer** or **programmatically**.
+
+### Textbox
+
+**Add via Toolbar (UI)**
+- Open **Form Designer** → select **Textbox** → click on the page → configure in **Properties**.
+
+
+**Add Programmatically (API)**
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ editInitial(): void {
+ const fields = this.pdfviewer.retrieveFormFields();
+ const init = fields.find((f: any) => f.name === 'Initial');
+ if (init) {
+ this.pdfviewer.formDesignerModule.updateFormField(init, {
+ tooltip: 'Add your initials',
+ thickness: 2,
+ isRequired: true,
+ isPrint: true,
+ backgroundColor: 'white',
+ borderColor: 'black'
+ } as any);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Style form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/move-resize-form-fields.md
new file mode 100644
index 0000000000..e16b3390e6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/move-resize-form-fields.md
@@ -0,0 +1,91 @@
+---
+layout: post
+title: Move and Resize form fields in the Angular PDF Viewer | Syncfusion
+description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Move and Resize PDF Form Fields in Angular
+- **Move**: Drag the form field to reposition it.
+- **Resize**: Use the resize handles to change width and height.
+
+
+
+## Move and Resize Fields Programmatically (API)
+You can set absolute bounds or move fields by a delta.
+
+**Set absolute bounds**
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ resizeMove(): void {
+ const fields = this.pdfviewer.retrieveFormFields();
+ const field = fields.find((f: any) => f.name === 'First Name') || fields[0];
+ if (field) {
+ this.pdfviewer.formDesignerModule.updateFormField(field, {
+ bounds: { X: 140, Y: 210, Width: 220, Height: 24 },
+ } as any);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/remove-form-fields.md
new file mode 100644
index 0000000000..ab0abf10ee
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/remove-form-fields.md
@@ -0,0 +1,101 @@
+---
+layout: post
+title: Remove form fields in the Angular PDF Viewer component | Syncfusion
+description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion Angular PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Remove PDF Form Fields from a PDF in Angular
+
+## Remove Form Fields Using the UI
+**Steps:**
+1. Enable **Form Designer mode**.
+2. Select the form field.
+3. Click **Delete** in the toolbar or press the **Delete** key.
+
+
+## Remove Form Fields Programmatically
+Use **deleteFormField()** with a field reference or ID.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerModule,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent {
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+
+ deleteAllFields(): void {
+ const fields = [...this.pdfviewer.formFieldCollections];
+ fields.forEach((field: any) => this.pdfviewer.formDesignerModule.deleteFormField(field));
+ }
+
+ deleteById(): void {
+ const collections = this.pdfviewer.formFieldCollections;
+ if (collections && collections.length > 0) {
+ const id = collections[0].id;
+ if (id) {
+ this.pdfviewer.formDesignerModule.deleteFormField(id);
+ }
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/overview-create-forms.md
new file mode 100644
index 0000000000..f36e9bde8a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/overview-create-forms.md
@@ -0,0 +1,20 @@
+---
+layout: post
+title: Overview of Create form fields in Angular PDF Viewer | Syncfusion
+description: Learn how to create edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create, Edit, Style, and Remove Form Fields in Angular PDF Viewer
+
+The [Angular PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview) allows you to create interactive PDF form fields, update their behavior and appearance, and remove them when they are no longer needed.
+All form field operations can be performed using either the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/form-designer) or [Angular APIs.](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/overview)
+
+This section explains how to:
+
+- [Create PDF form fields](./manage-form-fields/create-form-fields)
+- [Edit form field behavior and values](./manage-form-fields/modify-form-fields)
+- [Style the appearance of form fields](./manage-form-fields/customize-form-fields)
+- [Remove form fields from a PDF document](./manage-form-fields/remove-form-fields)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/overview.md
new file mode 100644
index 0000000000..a2eb301ba6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/overview.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: Overview of Forms in Angular PDF Viewer Control | Syncfusion
+description: Learn what the Form Designer in Syncfusion Angular PDF Viewer offers, supported field types, and how the topics are organized.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Overview of Forms in Angular PDF Viewer
+
+The Syncfusion PDF Viewer delivers a complete, easy-to-use PDF forms experience. You can read, fill, add, edit, and delete form fields directly within your PDF documents. These actions are supported through both the intuitive user interface and powerful programmatic APIs.
+
+The viewer also includes smooth import and export support for form data, making integration effortless. Developers benefit from extensive API control, while end users enjoy a clean and simple interface designed for a seamless and stress-free form-filling experience.
+
+## Filling PDF Forms
+
+Experience effortless PDF form filling through a clean, intuitive UI or automated workflows using powerful APIs. Flexible form data import and export support ensures smooth and efficient operations when working with PDF forms.
+
+See the [Filling PDF Forms](./form-filling) page for full details.
+
+Use the following code-snippet to enable form-filling by injecting `FormFields` Module.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ ],
+})
+export class AppComponent implements OnInit {
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {}
+}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+1. [Programmatically Form fill](./form-filling#fill-pdf-forms-programmatically)
+2. [Form Fill Using UI](./form-filling#fill-pdf-forms-through-the-user-interface)
+3. [Import the Form data](./form-filling#fill-pdf-forms-through-import-data)
+
+## Form Designer
+
+A built in Form Designer lets you quickly add, edit, move, and delete form fields in the PDF documents. This viewer allows you to design fillable PDF forms interactively either using the built-in form designer tools or building your own customized form designer tools.
+
+See the [Form Designer](./form-designer) page for full details.
+
+Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ ],
+})
+export class AppComponent implements OnInit {
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {}
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+Create and customize interactive fields directly on the PDF page.
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), or [remove](./manage-form-fields/remove-form-fields) forms
+- [Add a Signature Field](./manage-form-fields/create-form-fields#add-signature-field)
+- [Edit Form Field](./manage-form-fields/modify-form-fields)
+- [Remove Form Field](./manage-form-fields/remove-form-fields)
+- [Form Field Constraints](./form-constrain)
+
+## Supported form field types
+
+- [Textbox](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password](../forms/manage-form-fields/create-form-fields#add-password)
+- [CheckBox](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [RadioButton](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [ListBox](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md
index 9d115426bc..b6a58be951 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md
@@ -1,37 +1,98 @@
---
layout: post
-title: Add custom fonts to the PDF Viewer using the PDF document | Syncfusion
-description: Learn how to add custom fonts using the PDF document in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
+title: Add custom fonts in Angular PDF Viewer | Syncfusion
+description: Learn how to add and load custom TTF fonts for documents displayed in the Angular PDF Viewer using the customFonts property.
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# How to add custom fonts to the PDF viewer used in the PDF document
+# Add Custom Fonts to PDF Forms in Angular PDF Viewer
-To use custom fonts in the Syncfusion® PDF Viewer within your PDF document, you need to add the custom TTF font files to the resource URL directory and configure the viewer to load these fonts. You can specify the custom font names using the
-**customFonts** property, which accepts an array of font names.
+The Syncfusion **Angular PDF Viewer** supports loading, editing, and saving **custom fonts** in form fields such as [TextBox](../forms/manage-form-fields/create-form-fields#textbox), [ListBox](../forms/manage-form-fields/create-form-fields#listbox), and [DropDown](../forms/manage-form-fields/create-form-fields#dropdown) fields using the customFonts property. This ensures consistent text rendering even when the required fonts are not installed on the user’s system.
+Custom fonts are embedded and preserved when form fields are modified or saved, making the PDF display correctly across environments.
-The following steps are used to customize the selection border.
+## When dynamic fonts are used
+Dynamic fonts are currently used in the following scenarios:
+- **Text annotations** — When users enter text annotations that use non standard fonts, the viewer dynamically loads the required fonts to ensure correct character rendering.
+- **PDF forms** — When users fill form fields that rely on fonts not included by default, dynamic font loading ensures the entered text is rendered correctly.
-**Step 1:** Add the custom TTF font files to the resource URL path referenced in your application. For example, place the custom TTF files in the ej2-pdfviewer-lib folder, which will serve as the resource URL path.
+## How Custom Fonts Work
+The custom font workflow in the PDF Viewer is as follows:
+- Place the required **TrueType Font (TTF)** files in the resource directory used by the viewer.
+- Specify the font names using the customFonts property.
+- The specified fonts become available for:
+ - Rendering form field content
+ - Editing text in form fields
+ - Saving and downloading the PDF with embedded fonts
-**Step 2:** The following code snippet are how you can add custom fonts to the PDF viewer.
+## Steps to Add Custom Fonts
-```typescript
+### Add TTF Font Files
+1. Place the TTF font files in the resource path used by the PDF Viewer (for example, the ej2-pdfviewer-lib folder).
+2. Fonts can be referenced in either of the following ways:
+ - **Relative path**
+ Example:
+ calibri.ttf
+ fallback-fonts/calibri.ttf
+ - **Absolute URL**
+ Fonts can be hosted on a server and referenced using a fully qualified URL. Ensure that the hosting server has **CORS** enabled.
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
- TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner} from "../src/index";
+### Configure Custom Fonts in the PDF Viewer
+Specify the required font names in the customFonts property.
- PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
- TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit } from '@angular/core';
+import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
+ MagnificationService, ThumbnailViewService, ToolbarService,
+ NavigationService, TextSearchService, TextSelectionService,
+ PrintService, FormDesignerService, FormFieldsService,
+ AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
- let viewer: PdfViewer = new PdfViewer();
- viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
- viewer.customFonts = ["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"];
- viewer.appendTo("#pdfViewer");
+@Component({
+ selector: 'app-container',
+ // specifies the template string for the PDF Viewer component
+ template: `
+
+
+
`,
+ providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
+ ThumbnailViewService, ToolbarService, NavigationService,
+ TextSearchService, TextSelectionService, PrintService,
+ AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
+})
+export class AppComponent implements OnInit {
+ public document: string = window.location.origin + "/assets/pdfsuccinctly.pdf";
+ public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib";
+ public customFonts: string[] = [
+ 'simsun.ttc','sumsinb.ttf','arial/arialbd.ttf','arial/arial.ttf','BKANT.TTF',
+ 'calibri.ttf','GARA.TTF','GARAIT.TTF','msgothic.ttc','trebuc.ttf','wingding.ttf'
+ ];
+ ngOnInit(): void {
+ }
+}
+{% endhighlight %}
+{% endtabs %}
-```
+N>Ensure that the font file names match the specified font names.
-By following these steps, you can successfully integrate and use custom fonts in your PDF documents displayed in the EJ2 PDF Viewer.
\ No newline at end of file
+## Supported Form Fields
+Custom fonts can be applied to the following form field types:
+- [TextBox](../forms/manage-form-fields/create-form-fields#textbox)
+- [ListBox](../forms/manage-form-fields/create-form-fields#listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#dropdown)
+
+## Notes and Limitations
+- If text rendered using a custom font exceeds the form field’s bounds, the downloaded PDF may render incorrectly in some third party PDF viewers.
+- The same content displays correctly in the **Syncfusion PDF Viewer**.
+
+## To avoid rendering issues:
+- Use an appropriate font size that fits within the form field.
+- Increase the size of the form field before saving or downloading the PDF.
\ No newline at end of file