Angular Dynamic Form — The complete guide to building an advanced dynamic form 💪

Need an advanced guide to creating a dynamic Angular form?

Why is it such common scenario?

The project you’re sweating over is becoming a smashing success and you’re ready to be done… but all of a sudden at the last minute there’s this change to that form that must happen NOW!

Sigh. 😿

And the demands of your boss or client are clutching you tighter and tighter.

These kinds of scenarios are way too common. So how about a proactive approach that will allow us to dynamically render an Angular form? And make our form roll with the punches that way we can take it easy?

How about we build a dynamic Angular form so that we can throw it a blob of JSON or some other common schema that it can render?

Great idea eh?

But… Umm… let me see. What might we need to render dynamically? We’ve got all kinds of things to handle like…

  • Input text
  • Textarea
  • Radio buttons
  • Checkboxes
  • Form Validation
  • And more…

Oh sizzles! Is there any way to do this elegantly?

In this article I’ll guide you step-by-step to build a dynamic form like this one. This example uses Bootstrap CSS to style the form but you get to style it however you want.

Want all the code right away? Here’s the link.

Creating the data models

Ready to dig in? Then let’s get started now! 💥

The first step is to create a model for our input fields. We’ll create a file called form-field.ts and export our model like so.

Creating the data service

The next step is to create a service that will take our data source and return a form group.

We’ll whip out the Angular CLI and generate the service using the following command.

And add some dynamic form powers with the following code.

Overwhelming? Confused?

Great. That means you’re learning new things!

Notice that in this service we have two functions. One that takes a group of FormField and returns a FormGroup. And a second function that returns a group of `FormField`. The second function is where you get to use your imagination to pull the form data from whatever kind of source you like.

Create the form input component

The next step is to create the components that will render our dynamic form.

We’ll create the first one and call it dynamic-form-input. Here’s the Angular CLI command.

We’ll edit dynamic-form-input.component.ts to take the FormGroup and FormField<string> as an Input.

And finally edit dynamic-form-input.component.html to render the form field.

Create the form component

And finally we’ll generate our last component.

Here’s the code for the .ts file.

And the HTML that will get rendered.

Populating our form

So we’ve got everything wired up. All we got to do is “plug it in”.

In our app.component.ts file we’ll fetch the data for our dynamic form.

And then in app.component.html we’ll declare the dynamic form template and pass it the dynamic data.

💥 There it is!

Conclusion

This is an advanced example and explanation of how a dynamic Angular form can be created.

We looked at building a model to model the different form fields, and then create a service to handle those form fields and finally rendering the dynamic form in a component.

Too much work you say? This is a complex solution for a simple contact form but when requirements spin wheels on a dime it’s worth considering the dynamic Angular form.

Questions or comments? Anything I missed? Don’t hesitate to reach out.

Further Reading

Originally published here — https://danielk.tech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store