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	Event trigger when a form field is added.
formFieldClick	Events trigger when the form field is selected.
formFieldDoubleClick	Events trigger when the form field is double-clicked.
formFieldFocusOut	Events trigger when focus out from the form fields.
formFieldMouseLeave	Events trigger when the mouse cursor leaves the form field.
formFieldMouseOver	Events trigger when the mouse cursor is over a form field.
formFieldMove	Events trigger when a form field is moved.
formFieldPropertiesChange	Events trigger when a property of form field is changed.
formFieldRemove	Events trigger when a form field is removed.
formFieldResize	Events trigger when a form field is resized.
formFieldSelect	Events trigger when a form field is selected.
formFieldUnselect	Events trigger when a form field is unselected.
validateFormFields	Events trigger when validation is failed.

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

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.

app.component.ts

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);
  }
}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

validateFormFields event

The validateFormFields 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.

app.component.ts

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);
  }
}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));