How to build a dynamic form with Angular — A simple example with explanation

Need a quick intro to dynamic Angular forms? Here’s a 3-minute guide to get you started.

Dancing in your pants to build a dynamic form with Angular?

In this article we’ll work with a simple example, taking a JSON blob and using it to dynamically render a reactive Angular form.

The JSON blob will keep our examples simpler but it’s your project so do what you want, make an HTTP call to your API server for the JSON blob, compile the JSON file with the app, or even…

…um…

…wrap it up in a sock and hurl it into the toilet.

Wait? Toilets?

Oh!

JSON blobs and dynamic forms. Uh… let’s get started.

Our JSON blob

Here’s the data we’ll be using to dynamically render the form.

[
 {
 “fieldName”: “Name”,
 “fieldType”: “text”,
 “required”: true
 },
 {
 “fieldName”: “Email”,
 “fieldType”: “email”,
 “required”: true,
 “validator”: “email”
 },
 {
 “fieldName”: “Message”,
 “fieldType”: “text”,
 “required”: null
 }
]

We’ll use this JSON as a dynamic declaration of what our form will be like.

Why dynamic?

Because, buster, by the time we get this dynamic Angular form all wired up all we’ll have to do is change…