# pdf-viewer-form-filling

> PDF viewer sample demonstrating interactive form filling and field value updates.

**Framework:** angular  **Component:** PdfViewer  **Variant:** form-filling

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/pdf-viewer-form-filling.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-pdfviewer
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/pdf-viewer-form-filling/form-filling.component.ts

```typescript
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { PdfViewerComponent, TextFieldSettings, RadioButtonFieldSettings, InitialFieldSettings, CheckBoxFieldSettings, SignatureFieldSettings, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, LoadEventArgs, ValidateFormFieldsArgs, FormDesignerService,PageOrganizerService, PdfViewerModule } from '@syncfusion/ej2-angular-pdfviewer';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { ClickEventArgs } from '@syncfusion/ej2-buttons';

/**
 * Default PdfViewer Controller
 */
@Component({
    selector: 'control-content',
    templateUrl: 'form-filling.html',
    encapsulation: ViewEncapsulation.None,
    // tslint:disable-next-line:max-line-length
    providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService,
        TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService,PageOrganizerService],
    standalone: true,
    imports: [
        
        SwitchModule,
        PdfViewerModule,
    ],
})

export class FormFillingComponent implements OnInit {
    @ViewChild('pdfviewer')
    public pdfviewerControl!: PdfViewerComponent;

    public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
    public resource:string = "https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib";
    ngOnInit(): void {
        // ngOnInit function
    }
    public validateFormFields(e: ValidateFormFieldsArgs): void {
        let errorMessage: string = "Required Field(s): ";
        let forms: any = this.pdfviewerControl.formFieldCollections;
        let flag: boolean = false;
        let radioGroupName: string = "";
        for (var i = 0; i < forms.length; i++) {
            let text: string = "";
            if (forms[i].isRequired == true) {
                if (forms[i].type.toString() == "Checkbox" && forms[i].isChecked == false) {
                    text = forms[i].name;
                }
                else if (forms[i].type == "RadioButton" && flag == false) {
                    radioGroupName = forms[i].name;
                    if (forms[i].isSelected == true)
                        flag = true;
                }
                else if (forms[i].type.toString() != "Checkbox" && forms[i].type != "RadioButton" && forms[i].value == "") {
                    text = forms[i].name;
                }
                if (text != "") {
                    if (errorMessage == "Required Field(s): ") {
                        errorMessage += text;
                    }
                    else {
                        errorMessage += ", " + text;
                    }
                }
            }
        }
        if (!flag && radioGroupName != "") {
            if (errorMessage == "Required Field(s): ")
                errorMessage += radioGroupName;
            else
                errorMessage += ", " + radioGroupName;
        }
        if (errorMessage != "Required Field(s): ") {
            this.pdfviewerControl.showNotificationPopup(errorMessage);
        }
    }
}

```

### src/components/pdf-viewer-form-filling/form-filling.html

```html

<div class="control-section">
    <div class="content-wrapper">
        <ejs-pdfviewer #pdfviewer id="pdfViewer" [documentPath]='document' [resourceUrl]='resource' (validateFormFields)='validateFormFields($event)' [enableFormFieldsValidation]=true [showNotificationDialog]=false style="height:640px;display:block"></ejs-pdfviewer>
    </div>
</div>

```