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?