{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "pdf-viewer-form-filling",
  "framework": "react",
  "type": "registry:component",
  "component": "PdfViewer",
  "variant": "form-filling",
  "dependencies": [
    "@syncfusion/ej2-react-pdfviewer"
  ],
  "description": "PDF viewer validates required form fields before allowing the document to be submitted.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/pdf-viewer-form-filling.md"
  },
  "files": [
    {
      "target": "src/components/pdf-viewer-form-filling/PdfViewer.tsx",
      "content": "/**\n * Default PDF Viewer sample\n */\nimport {\n    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,\n    ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer,Inject\n} from '@syncfusion/ej2-react-pdfviewer';\n\nfunction FormFilling() {\n    let viewer: PdfViewerComponent;\n    return (<div>\n        <div className='control-section'>\n            {/* Render the PDF Viewer */}\n            <PdfViewerComponent id=\"container\" ref={(scope) => { viewer = scope; }} documentPath=\"https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf\" resourceUrl = \"https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib\" validateFormFields={validateFormFields} enableFormFieldsValidation={true} showNotificationDialog={false} style={{ 'height': '640px' }}>\n                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]} />\n            </PdfViewerComponent>\n        </div>\n    </div>\n    );\n    function validateFormFields(args) {\n        var errorMessage = \"Required Field(s): \";\n        var forms = viewer.formFieldCollections;\n        var flag = false;\n        var radioGroupName = \"\";\n        for (var i = 0; i < forms.length; i++) {\n            var text = \"\";\n            if (forms[i].isRequired == true) {\n                if (forms[i].type.toString() == \"Checkbox\" && forms[i].isChecked == false) {\n                    text = forms[i].name;\n                }\n                else if (forms[i].type == \"RadioButton\" && flag == false) {\n                    radioGroupName = forms[i].name;\n                    if (forms[i].isSelected == true)\n                        flag = true;\n                }\n                else if (forms[i].type.toString() != \"Checkbox\" && forms[i].type != \"RadioButton\" && forms[i].value == \"\") {\n                    text = forms[i].name;\n                }\n                if (text != \"\") {\n                    if (errorMessage == \"Required Field(s): \") {\n                        errorMessage += text;\n                    }\n                    else {\n                        errorMessage += \", \" + text;\n                    }\n                }\n            }\n        }\n        if (!flag && radioGroupName != \"\") {\n            if (errorMessage == \"Required Field(s): \")\n                errorMessage += radioGroupName;\n            else\n                errorMessage += \", \" + radioGroupName;\n        }\n        if (errorMessage != \"Required Field(s): \") {\n            viewer.showNotificationPopup(errorMessage);\n        }\n    }\n}\nexport default FormFilling;"
    }
  ]
}