Is NGX Extended Pdf Viewer the Ultimate Solution for Acrofields?

Can a universal solution be developed for PDF Forms? The example in the documentation suggests this, but the acrofield names and their quantities are already known here

public firstName = 'Jane';
public lastName = 'Doe';
public country = 'Spain';
public jobExperience = '6';
public typeScript = true;

public get formData(): { [fieldName: string]: string | number | boolean } {
return {
firstName: this.firstName,
lastName: this.lastName,
yearsOfExperience: this.jobExperience,
typeScript: this.typeScript,
country: this.country
};
}

public set formData(data: { [fieldName: string]: string | number | boolean }) {
this.firstName = data.firstName as string;
this.lastName = data.lastName as string;
this.jobExperience = data.yearsOfExperience as string;
this.country = data.country as string;
this.typeScript = data.typeScript === 'true' || data.typeScript === true;
}

Is it possible to pass a list of strings containing the acrofield names and then connect them to these formData set and get methods? What would be the best approach?

I attempted to use a map, but when I tried to assign it similarly, the extension stopped working. I believe this method is not suitable, any recommendations?

Answer №1

When working with PDF Forms, I utilize the ngxService.getFormData function to extract data. For more information on this, you can refer to the "Forms raw data" section on the following page: . Additionally, it can be beneficial to monitor the formRendered event and create a mapping of HTML input elements linked to the current form fields:

document.getElementById('pdfjs_internal_id_' + annotation.fieldAnnotation.id) as HTMLInputElement

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Highcharts xrange series is encountering the error message "x is not a function."

I am currently working in an Angular 4 (Angular-cli) environment and attempting to utilize the x-range highcharts type. After executing the npm install command npm install highcharts --save, I included these lines of code: import * as Highcharts from &ap ...

What could be causing the Google Sign-In functionality to fail in an Angular web application?

I'm currently working on implementing Google sign-in for my web app. I've been following this tutorial here. However, I'm facing an issue where the Google sign-in button is not appearing. I would like the authentication to happen at http://l ...

The Angular array stays undefined when JSON data is being passed

I am facing an issue with my API that provides JSON data related to football matches. Even after passing this data to the frontend (angular), I am encountering a problem where the array remains undefined. JSON Data: "match_id":"194200", "country_id":"41" ...

Angular 4 yields an undefined result

I'm currently working on this piece of code and I need help figuring out how to return the value of rowData in this scenario. private createRowData() { const rowData: any[] = []; this.http .get(`/assets/json/payment.json`) .toPromise() .then(r ...

What is the best way to include a Web Service within an export variable in Angular 2 using TypeScript?

Is there a way to incorporate JSON data retrieved from the server into the export var HEROES: Hero[ ] function? Here is the link: https://angular.io/resources/live-examples/toh-5/ts/eplnkr.html In app/mock-heroes.ts, you will find the following data, im ...

"Learn the process of distinguishing between a drop-down value and a selected value within a drop-down menu using angular2-multiselect

I need assistance with a requirement involving a multi-select drop-down menu where the values are in the format of "Code - Name". When an option is selected from the drop-down, only the "Code" should be displayed. I am currently using angular2-multiselec ...

The absence of class generic parameter constraints cascades down to class properties

Trying to implement TypeScript with TypeORM using a generic class has been challenging. The issue lies within my AbstractDal which takes a generic parameter that is constrained to extend IEntity. IEntity is supposed to have an id property, yet for some rea ...

Ways to display the initial letter of the surname using Angular

I need help displaying the full first name and first letter of the last name. For example, if the name is John Doe, I want it to show as John D. Currently, my code is not displaying all the letters from the last name. Here is what I have tried: <div cl ...

Is it possible to modify the number format of an input field while in Antd's table-row-edit mode?

I am currently utilizing the Table Component of Ant Design v2.x and unfortunately, I cannot conduct an upgrade. My concern lies with the inconsistent formatting of numbers in row-edit mode. In Display mode, I have German formatting (which is desired), but ...

How can a div be displayed next to another div when it is clicked using angular2?

Is there a way to have another page show up after clicking on a div, like shown in the image below? Before Click: https://i.sstatic.net/qSBbc.png After Click: https://i.sstatic.net/julH4.png ...

Ways to incorporate conditional checks prior to running class methods

Seeking input on handling async data retrieval elegantly. When initializing a class with asynchronous data, I have been following this approach: class SomeClass { // Disabling strictPropertyInitialization private someProperty: SomeType public asy ...

Automatically export as a namespace in a declaration file

I have a compact TypeScript library that is exported as UMD, and I generate the *.d.ts file automatically by setting "declaration": true in my tsconfig. The exported file contains: export class Blue { alert(): void { console.log('alerte ...

Are there specific files or classes that store constants for different keyboard events?

When working in Angular, I often bind data with a host listener using code similar to the example below: @HostListener('window:keyup', ['$event']) onKeyUp(event: KeyboardEvent) { if (event.keyCode === 13) { this.onEnterClicked(ev ...

Guide on maintaining Spring Security authentication across Angular front-end

Following the initial feedback on my query, I made adjustments to my Spring Security setup and successfully logged in and accessed a test endpoint using Postman. However, when the same endpoint is called by Angular post successful login, the request fails, ...

retrieving information and parsing from an API using Ionic and Angular version 4

How can I extract data from the "data" field in my API using a function? getMenu() { return this.http.get('http://site.dev/api/menu/7'); } { "id": 26, "name": "Default", "title": "default", "pageelements": [ { "id": 15, ...

Caught up: TypeScript not catching errors inside Promises

Currently, I am in the process of developing a SPFx WebPart using TypeScript. Within my code, there is a function dedicated to retrieving a team based on its name (the get() method also returns a promise): public getTeamChannelByName(teamId: string, cha ...

Can someone assist me in configuring the mobile display for an Angular website?

I'm currently working on a website and I'm in need of some assistance to fix the mobile view. The main issue I'm facing is with the menu which contains 5 buttons. While I'm happy with how it looks on a laptop or desktop, the mobile view ...

Selecting logic depending on the request body in NestJS

Currently, my controller looks like the following: @Controller("workflow") export class TaskWorkflowController { public constructor( private readonly jobApplicationActivityWorkflow: JobApplicationActivityService ) {} @Post("/:job- ...

Ways to avoid route change triggered by an asynchronous function

Within my Next.js application, I have a function for uploading files that includes the then and catch functions. export const uploadDocument = async (url: UploadURLs, file: File) => { const formData = new FormData(); formData.append("file" ...

Establish HTTP headers for accessing the Oxford API in an Angular 6 application

public performAutocomplete(wordInput):any { let headersOptions = { headers:{ 'Accept': 'application/json', 'app_id': 'myid', "app_key": "mykey" } as any } this.wordTyped = wordInp ...