- formFieldAdd event
- formFieldClick event
- formFieldDoubleClick event
- formFieldFocusOut event
- formFieldMouseLeave event
- formFieldMouseOver event
- formFieldMove event
- formFieldPropertiesChange event
- formFieldRemove event
- formFieldResize event
- formFieldSelect event
- formFieldUnselect event
- validateFormFields event
Contact Support
PDF Viewer Form Field events
19 Aug 202424 minutes to read
The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are:
* formFieldAdd
* formFieldClick
* formFieldDoubleClick
* formFieldFocusOut
* formFieldMouseLeave
* formFieldMouseOver
* formFieldMove
* formFieldPropertiesChange
* formFieldRemove
* formFieldResize
* formFieldSelect
* formFieldUnselect
* validateFormFields
formFieldAdd event
The formFieldAdd
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldAddArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldAdd)='formFieldAdded($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
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";
ngOnInit(): void {
}
public formFieldAdded(formfieldadded: FormFieldAddArgs): void {
console.log('form field page number: ' + formfieldadded.pageIndex);
console.log('form field event name: ' + formfieldadded.name);
console.log('form field data: ', formfieldadded.field);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldClick event
The formFieldClick
event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldAddArgs,
FormFieldClickArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldClick)='formFieldClicked($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldClicked(formfieldclick: FormFieldClickArgs): void {
console.log('Form field event name: ' + formfieldclick.name);
console.log('Is form field cancel: ' + formfieldclick.cancel);
console.log('Form field data: ', formfieldclick.field);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldDoubleClick event
The formFieldDoubleClick
event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldDoubleClickArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldDoubleClick)='formFieldDoubleClick($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldDoubleClick(formfieldclick: FormFieldDoubleClickArgs): void {
console.log('Form field event name: ' + formfieldclick.name);
console.log('Is form field cancel: ' + formfieldclick.cancel);
console.log('Form field data: ', formfieldclick.field);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldFocusOut event
The formFieldFocusOut
event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldFocusOutEventArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldFocusOut)='formFieldFocusOut($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldFocusOut(formfieldadded: FormFieldFocusOutEventArgs): void {
console.log('form field name: ', formfieldadded.fieldName);
console.log('form field event name: ' + formfieldadded.name);
console.log('form field data: ', formfieldadded.value);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldMouseLeave event
The formFieldMouseLeave
event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldMouseLeaveArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldMouseLeave)='formFieldMouseLeaved($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldMouseLeaved(formFieldMouseLeave: FormFieldMouseLeaveArgs): void {
console.log('form field page number: ', formFieldMouseLeave.pageIndex);
console.log('form field event name: ' + formFieldMouseLeave.name);
console.log('form field data: ', formFieldMouseLeave.field);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldMouseOver event
The formFieldMouseOver
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldMouseoverArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldMouseover)='formFieldMouseovered($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldMouseovered(formFieldMouseover: FormFieldMouseoverArgs): void {
console.log('form field page number: ', formFieldMouseover.pageIndex);
console.log('form field event name: ' + formFieldMouseover.name);
console.log('form field data: ', formFieldMouseover.field);
console.log(' mouse over x position '+ formFieldMouseover.X + ' mouse over y position '+ formFieldMouseover.Y );
console.log(' mouse over X position respect to the page '+ formFieldMouseover.pageX + ' mouse over Y position respect to the page '+ formFieldMouseover.pageY);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldMove event
The formFieldMove
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldMoveArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldMove)='formFieldMoved($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldMoved(formFieldMove: FormFieldMoveArgs): void {
console.log('form field page number: ', formFieldMove.pageIndex);
console.log('form field event name: ' + formFieldMove.name);
console.log('form field data: ', formFieldMove.field);
console.log('mouse current position '+ formFieldMove.currentPosition);
console.log('mouse current position '+ formFieldMove.previousPosition);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldPropertiesChange event
The formFieldPropertiesChange
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldPropertiesChangeArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldPropertiesChange)='formFieldPropertiesChanged($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldPropertiesChanged(formFieldMove: FormFieldPropertiesChangeArgs): void {
console.log('form field page number: ', formFieldMove.pageIndex);
console.log('form field event name: ' + formFieldMove.name);
console.log('form field data: ', formFieldMove.field);
console.log('Whether form field alignment changed '+ formFieldMove.isAlignmentChanged);
console.log('Whether form field backgropund color changed '+ formFieldMove.isBackgroundColorChanged);
console.log('Whether form field border color changed '+ formFieldMove.isBorderColorChanged);
console.log('Whether form field border width changed '+ formFieldMove.isBorderWidthChanged);
console.log('Whether form field color changed changed '+ formFieldMove.isColorChanged);
console.log('Whether form field custom data changed '+ formFieldMove.isCustomDataChanged);
console.log('Whether form field font family changed '+ formFieldMove.isFontFamilyChanged);
console.log('Whether form field font size changed '+ formFieldMove.isFontSizeChanged);
console.log('Whether form field font style changed '+ formFieldMove.isFontStyleChanged);
console.log('Whether form field maximum length changed '+ formFieldMove.isMaxLengthChanged);
console.log('Whether form field name changed '+ formFieldMove.isNameChanged);
console.log('Whether form field readonly changed '+ formFieldMove.isReadOnlyChanged);
console.log('Whether form field required changed '+ formFieldMove.isRequiredChanged);
console.log('Whether form field print changed '+ formFieldMove.isPrintChanged);
console.log('Whether form field tool tip changed '+ formFieldMove.isToolTipChanged);
console.log('Whether form field visiblity changed '+ formFieldMove.isVisibilityChanged);
console.log('Whether form field value changed '+ formFieldMove.isValueChanged);
console.log('Whether form field new value changed '+ formFieldMove.newValue);
console.log('Whether form field old valuue changed '+ formFieldMove.oldValue);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldRemove event
The formFieldRemove
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldRemoveArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldRemove)='formFieldRemoved($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldRemoved(formFieldMove: FormFieldRemoveArgs): void {
console.log('form field page number: ', formFieldMove.pageIndex);
console.log('form field event name: ' + formFieldMove.name);
console.log('form field data: ', formFieldMove.field);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldResize event
The formFieldResize
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldResizeArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldResize)='formFieldResized($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldResized(formFieldMove: FormFieldResizeArgs): void {
console.log('form field page number: ', formFieldMove.pageIndex);
console.log('form field event name: ' + formFieldMove.name);
console.log('form field data: ', formFieldMove.field);
console.log('form field current position: ', formFieldMove.currentPosition);
console.log('form field previous position: ', formFieldMove.previousPosition);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldSelect event
The formFieldSelect
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldSelectArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldSelect)='formFieldSelected($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldSelected(formFieldMove: FormFieldSelectArgs): void {
console.log('form field page number: ', formFieldMove.pageIndex);
console.log('form field event name: ' + formFieldMove.name);
console.log('form field data: ', formFieldMove.field);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
formFieldUnselect event
The formFieldUnselect
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
FormFieldUnselectArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(formFieldUnselect)='formFieldUnSelected($event)'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public formFieldUnSelected(formFieldMove: FormFieldUnselectArgs): void {
console.log('form field page number: ', formFieldMove.pageIndex);
console.log('form field event name: ' + formFieldMove.name);
console.log('form field data: ', formFieldMove.field);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
validateFormFields event
The formFieldUnselect
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.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService,
ValidateFormFieldsArgs} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
(validateFormFields)='validateFormFields($event)'
[enableFormFieldsValidation]=true
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
ngOnInit(): void {
}
public validateFormFields(validateFormField: ValidateFormFieldsArgs): void {
console.log('form field event name: ' + validateFormField.name);
console.log('form field document name: ' + validateFormField.documentName);
console.log('form field data: ', validateFormField.formField);
console.log('non fillable form field details: ', validateFormField.nonFillableFields);
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));