Jan KaiserJun 23, 20233 min readIn the first blog post of the series, we learned about Angular reactive forms and the data structures behind them. When developing real-world applications, however, you often need to leverage Dynamic forms, as writing boilerplate for every form and its specific cases can be tedious and time-consuming. In certain situations, it may even be necessary to retrieve information from an API to construct the forms.In this post, we will go over a convenient abstraction we can create to build dynamic and adaptable forms without repeating boilerplate. The trick is to create a "view model" for our data and use a service to transform that data into a reactive form. I was first introduced to this approach by my friend and former teammate Thomas Duft, and I've been using it ever since.The approach outlined in the linked article worked great with untyped forms, but since now we can get our forms strictly typed, we'll want to upgrade it.And here is where it gets a bit tricky. Remember how I mentioned you shouldn't predeclare your form groups earlier? If you want to recursively create a form from a config, you just have to. And it's a dynamic form, so you cannot easily type it. To solve the issue, I devised a trick inspired by a "Super Form" suggested by Bobby Galli. Assuming we will have interfaces defined for our data, using this approach, we can create dynamic type-safe forms.First, we'll create types for our form config:And then we'll create some type mappings:And now we can use our types in a service that will take care of creating nested dynamic forms:And that's it. Now we can use our FormService to create forms. Let's say we have the following User model:We can create a form for this user from config in the following way:If we would check the type of userForm.value now, we would see that it's correctly inferred as:To display the dynamic forms, we can write a simple component that takes the FormSection or FormField as an Input() along with our FormGroup and displays the form recursively.We can use a setter to assign either field or section property when the view model is passed into the component, so we can conveniently use them in our template. Our form component's TypeScript code will look something like this:And our template will reference a new form component for each section field in case we have passed in a FormSection and it will have a switch case to display the correct control in case a FormField has been passed in:That way, we can display the whole form just by referencing one component, such asCheck out an example on StackBlitz.In the next (and last) post of the series, we will learn about building custom Form Controls.This Dot Labs is a JavaScript consulting firm that enables companies to build and improve their digital technologies with confidence. For expert architectural guidance, training, consulting, engineering leadership, and development services in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, Polymer, and more, visit thisdot.coSoftware engineer passionate about everything web-related. Particularly loves Angular, SCSS, TypeScript, soccer and dachshundsDo you want to have the job done? We are ready to provide our expertise!This Dot Labs proudly partners with enterprises interested in transforming their digital assets, upskilling their teams, and finding novel avenues for advanced integration.