Angular + PDF + Forms = PDF Dynamic Reactive Forms

WORKING DEMO HERE — GITHUB REPO HERE

Several times I had to make applications that gather information that was then represented or sent via PDF: the UI (mainly HTML forms) and the relative PDF output often differed a lot, let alone the tedious maintenance or evolutive implementations… so why not make the PDF fillable using Angular’s forms and benefiting from validation, events and so on?

In this article we will focus on the dynamic creation of forms (in particular using the Reactive “variant”) with the purpose of making any PDF provided with a form in an Angular Reactive Form.

Let’s take a sample PDF (I have created one on the fly for example), add the relative input forms (in this case you can also use some useful online tool) and provide an unique field name: these names will become the fields of the JSON object that will represent our form (choose them carefully, they must be unique 😃).

We proceed by choosing the correct types of control for the proposed input forms: in my case (for simplicity) I entered 3 textfield…