alter input type when displaying PDF forms with pdf.js

51 views Asked by At

I'm using PDF.js (or rather ngx-extended-pdf-viewer) to display a pdf based form in my angular application and would like to replace the input element automatically created for drop down fields with a text field and a linked datalist to enable arbitrary input. I managed to replace the HTML element with a element like so (with "Anbieter" being the field I'd like replace):

   const raw = this.ngxService.getFormData(true);
   raw.then(v => {
     this.formFields.length = 0;
     v.map((annotation: any) => {
       const field: FormField = new FormField(annotation.fieldAnnotation.fieldName, annotation.fieldAnnotation.id);
       this.formFields.push(field);
       if (field.name == 'Anbieter' && document.getElementById('pdfjs_internal_id_' + field.id) != null)
       {
         const select = (document.getElementById('pdfjs_internal_id_' + field.id) as HTMLSelectElement);
         if (select?.nodeName == 'SELECT') {
           const section : any = select.parentNode;
           if (section != null)
           {
             section.className = 'textWidgetAnnotation';
             const options = document.createElement('datalist') as HTMLDataListElement;
             options.id = 'AnbieterList';
             for (let i = 0; i < select.options.length; i++)
             {
               const opt = document.createElement('option');
               opt.text = select.options[i].text;
               options.appendChild(opt);
             }
             const anbieter = document.createElement('input') as HTMLInputElement;
             anbieter.type = 'text';
             anbieter.name = 'Anbieter';
             anbieter.id = select.id;
             anbieter.style.cssText = select.style.cssText;
             anbieter.width = select.clientWidth;
             anbieter.eventListeners = select.eventListeners;
             anbieter.setAttribute('list', options.id);
             anbieter.setAttribute('data-element-id', field.id);
             section.appendChild(options);
             section.replaceChild(anbieter, select);
           }
         }
       }
     })
   });

The new field however is not triggering the formDataChange event and it's value is not reflected in the [(formData)] binding. What I'm obviously missing here is a way to exchange the reference to the dom element within pdf.js' form representation.

Any idea how to replace the control in the pdf.js' form representation? Alternatively. Is there a better way to replace the select with an input/datalist element?

0

There are 0 answers