Skip to content

Commit 3ce721f

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1004880: Updated pending Forms items in Angular PDF Viewer
1 parent 2ee666c commit 3ce721f

4 files changed

Lines changed: 168 additions & 38 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -772,6 +772,7 @@
772772
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-constrain">Form Field Flags</a></li>
773773
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-validation">Form Validation</a></li>
774774
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/custom-fonts">Custom fonts</a></li>
775+
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-handling-best-practices">PDF Form Handling Best Practices</a></li>
775776
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-field-events">Form Field events</a></li>
776777
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/form-fields-api">APIs</a></li>
777778
<li><a href="/document-processing/pdf/pdf-viewer/angular/forms/flatten-form-fields">Flatten form fields</a></li>

‎Document-Processing/PDF/PDF-Viewer/angular/forms/form-handling-best-practices.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
layout: post
3+
title: PDF Form Handling Best Practices in Angular PDF Viewer | Syncfusion
4+
description: Learn the recommended best practices for naming, validating, grouping, importing, and designing form fields in the Syncfusion Angular PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# PDF Form Handling Best Practices in Angular PDF Viewer
12+
13+
This guide provides a comprehensive overview of recommended practices for creating, organizing, validating, and automating PDF forms in the Syncfusion Angular PDF Viewer.
14+
15+
It explains how to structure field names, ensure consistency, apply validation rules, group related fields, and streamline workflows through pre-filling and data import/export. By following these guidelines, you can build clean, reliable, and efficient form experiences that are easier to maintain and work seamlessly across different use cases.
16+
17+
## 1. Use Clear and Unique Field Names
18+
19+
Field names are critical for automation, data mapping, and debugging. Always:
20+
21+
- Use descriptive, unique names for each field (e.g., `FirstName`, `InvoiceNumber`).
22+
- Avoid generic names like `Textbox1` or `Field2`.
23+
- Ensure names are consistent across import/export workflows.
24+
25+
![Forms Unique Field Name](../../javascript-es6/images/ui-textbox-edit.png)
26+
27+
You can refer to [Create Form Fields](../forms/manage-form-fields/create-form-fields) in Angular PDF Viewer to know more about creating form fields.
28+
29+
## 2. Maintain Consistent Field Types
30+
31+
Changing a field’s type (e.g., from textbox to dropdown) can break data mapping and validation. Best practices:
32+
33+
- Do not change a field’s type after creation.
34+
- Fields with the same name must always have the same type.
35+
- Use the correct field type for the intended data (e.g., checkbox for boolean, textbox for free text).
36+
37+
![Grouping Form Fields](../../javascript-es6/images/groupTextFileds.png)
38+
39+
You can refer to [Group Form Fields](../forms/group-form-fields) in Angular PDF Viewer to know more about grouping form fields.
40+
41+
## 3. Validate Data Before Submission
42+
43+
Validation ensures data quality and prevents errors downstream. Always:
44+
45+
- Mark required fields and check for empty values.
46+
- Validate formats (email, phone, numbers, etc.).
47+
- Use custom validation logic for business rules.
48+
- Prevent submission or export if validation fails.
49+
50+
You can refer to [Form Validation](../forms/form-validation) in Angular PDF Viewer to know more about form fields Validation.
51+
52+
## 4. Pre-Fill Known Values
53+
54+
Pre-filling fields improves user experience and reduces errors. For example:
55+
56+
- Populate user profile data (name, email, address) automatically.
57+
- Use default values for common fields.
58+
59+
![Form Filling](../../javascript-es6/images/FormFilled.png)
60+
61+
You can refer to [Form Filling](../forms/form-filling) in Angular PDF Viewer to know more about form filling.
62+
63+
## 5. Automate with Import/Export
64+
65+
Automate workflows by importing/exporting form data. Recommendations:
66+
67+
- Use **JSON** for web apps and REST APIs.
68+
- Use **XFDF/FDF** for Adobe workflows.
69+
- Use **XML** for legacy systems.
70+
- Ensure field names match exactly for successful mapping.
71+
72+
You can refer to [Export/Import Form fields](../forms/import-export-form-fields/export-form-fields) in Angular PDF Viewer to know more about Export and Import form fields.
73+
74+
## 6. Group Related Fields for Complex Forms
75+
76+
Group fields logically for better structure and easier validation. Examples:
77+
78+
- Address sections (Street, City, State, ZIP)
79+
- Invoice line items
80+
- Repeated form subsections
81+
82+
Benefits:
83+
84+
- Structured exported data
85+
- Easier validation
86+
- Improved user experience
87+
88+
![Grouping Form Fields](../../javascript-es6/images/groupTextFileds.png)
89+
90+
You can refer to [Group Form Fields](../forms/group-form-fields) in Angular PDF Viewer to know more about grouping form fields.
91+
92+
## 7. Keep Form Design Clean and Accessible
93+
94+
Good design improves usability and accessibility. Tips:
95+
96+
- Maintain consistent spacing and alignment (use grid layouts).
97+
- Use uniform field widths and clear labels.
98+
- Avoid clutter—don’t crowd too many fields in one area.
99+
- Use section headers to guide users.
100+
101+
![Form Fields](../../javascript-es6/images/FormFill.png)
102+
103+
You can refer to [Group Form Fields](../forms/group-form-fields) in Angular PDF Viewer to know more about grouping form fields.
104+
105+
## See Also
106+
107+
- [Filling PDF Forms](../forms/form-filling)
108+
- [Create Form Fields](../forms/manage-form-fields/create-form-fields)
109+
- [Modify Form Fields](../forms/manage-form-fields/modify-form-fields)
110+
- [Style Form Fields](../forms/manage-form-fields/customize-form-fields)
111+
- [Remove Form Fields](../forms/manage-form-fields/remove-form-fields)
112+
- [Group Form Fields](../forms/group-form-fields)
113+
- [Form Validation](../forms/form-validation)
114+
- [Import and Export Form Fields](../forms/import-export-form-fields/export-form-fields)

‎Document-Processing/PDF/PDF-Viewer/angular/forms/group-form-fields.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ This page covers:
1818
- [How to group form fields programmatically](#group-pdf-form-fields-programmatically)
1919
- [Related references and samples](#example-scenarios)
2020

21-
2221
## How grouping works
2322

2423
In a PDF form, multiple PDF form fields can represent the same logical field. When PDF form fields share the same **Name**, they are treated as a group and stay synchronized.

‎Document-Processing/PDF/PDF-Viewer/angular/forms/submit-form-data.md‎

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -45,19 +45,25 @@ This full example shows an Angular component with the PDF viewer and a Submit bu
4545

4646
{% tabs %}
4747
{% highlight ts tabtitle="Standalone" %}
48-
import { Component, ViewChild } from '@angular/core';
48+
import { Component, OnInit, ViewChild } from '@angular/core';
4949
import {
50-
PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
51-
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
52-
PageOrganizer, Print
50+
PdfViewerModule,
51+
ToolbarService,
52+
MagnificationService,
53+
NavigationService,
54+
AnnotationService,
55+
TextSelectionService,
56+
TextSearchService,
57+
FormFieldsService,
58+
FormDesignerService,
59+
PdfViewerComponent,
5360
} from '@syncfusion/ej2-angular-pdfviewer';
5461

5562
@Component({
56-
selector: 'app-submit-form',
57-
standalone: true,
58-
imports: [PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
59-
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print],
60-
template: `
63+
selector: 'app-root',
64+
standalone: true,
65+
imports: [PdfViewerModule],
66+
template: `
6167
<div style="height: 640px">
6268
<div style="margin-bottom: 8px">
6369
<button (click)="handleSubmit()">Submit form data</button>
@@ -70,37 +76,47 @@ import {
7076
>
7177
</ejs-pdfviewer>
7278
</div>
73-
`
79+
`,
80+
providers: [
81+
ToolbarService,
82+
MagnificationService,
83+
NavigationService,
84+
AnnotationService,
85+
TextSelectionService,
86+
TextSearchService,
87+
FormFieldsService,
88+
FormDesignerService,
89+
],
7490
})
75-
export class SubmitFormComponent {
76-
@ViewChild('pdfViewer')
77-
public pdfViewer!: PdfViewerComponent;
78-
79-
sendToServer(formData: any): Promise<void> {
80-
// Adjust URL to your server endpoint
81-
return fetch('/api/submit-form', {
82-
method: 'POST',
83-
headers: { 'Content-Type': 'application/json' },
84-
body: JSON.stringify(formData)
85-
}).then(res => {
86-
if (!res.ok) {
87-
throw new Error(`Server error ${res.status}`);
88-
}
89-
});
90-
}
91-
92-
async handleSubmit(): Promise<void> {
93-
try {
94-
// exportFormFieldsAsObject returns a Promise resolving to form data object
95-
const formData = await this.pdfViewer.exportFormFieldsAsObject();
96-
await this.sendToServer(formData);
97-
console.log('Form data submitted successfully.');
98-
} catch (err) {
99-
console.error(err);
100-
console.log('Submission failed: ' + (err as Error).message);
101-
}
91+
export class AppComponent implements OnInit {
92+
@ViewChild('pdfViewer') public pdfviewer: PdfViewerComponent;
93+
ngOnInit(): void {}
94+
sendToServer(formData: any): Promise<void> {
95+
// Adjust URL to your server endpoint
96+
return fetch('/api/submit-form', {
97+
method: 'POST',
98+
headers: { 'Content-Type': 'application/json' },
99+
body: JSON.stringify(formData),
100+
}).then((res) => {
101+
if (!res.ok) {
102+
throw new Error(`Server error ${res.status}`);
103+
}
104+
});
105+
}
106+
107+
async handleSubmit(): Promise<void> {
108+
try {
109+
// exportFormFieldsAsObject returns a Promise resolving to form data object
110+
const formData = await this.pdfviewer.exportFormFieldsAsObject();
111+
await this.sendToServer(formData);
112+
console.log('Form data submitted successfully.');
113+
} catch (err) {
114+
console.error(err);
115+
console.log('Submission failed: ' + (err as Error).message);
102116
}
117+
}
103118
}
119+
104120
{% endhighlight %}
105121
{% endtabs %}
106122

0 commit comments

Comments
 (0)