Creating JSON Dynamic Forms with Angular Reactive Forms

In this blog post, we'll walk through the process of creating a dynamic form using Angular Reactive Forms and a JSON configuration file. This approach allows you to build flexible and extendable forms by defining their structure outside the codebase.

---

Setting Up the Angular Project

If you haven't installed Angular CLI yet:

npm install -g @angular/cli

Create a new Angular project:

ng new dynamic-form-app
cd dynamic-form-app

---

Installing Reactive Forms and HttpClient Modules

Update your app.module.ts to include the required modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

---

Creating the JSON Configuration

Create a file named form-config.json in src/assets:

[
  {
    "name": "name",
    "label": "Name",
    "type": "text",
    "value": ""
  },
  {
    "name": "email",
    "label": "Email",
    "type": "email",
    "value": ""
  },
  {
    "name": "country",
    "label": "Country",
    "type": "select",
    "value": "",
    "options": ["Pakistan", "USA", "Canada"]
  }
]

This file defines a form with three fields—text input, email input, and a select dropdown.

---

Creating the Form Model

Update app.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  form: FormGroup = this.fb.group({});
  config: any[] = [];

  constructor(private fb: FormBuilder, private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any[]>('/assets/form-config.json').subscribe(config => {
      this.config = config;
      config.forEach(field => {
        this.form.addControl(field.name, this.fb.control(field.value));
      });
    });
  }

  onSubmit() {
    console.log(this.form.value);
  }
}

---

Creating the Form Template

Update app.component.html:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div *ngFor="let field of config">
    <label [for]="field.name">{{ field.label }}</label>

    <input
      *ngIf="field.type !== 'select'"
      [type]="field.type"
      [formControlName]="field.name"
      [id]="field.name"
    />

    <select
      *ngIf="field.type === 'select'"
      [formControlName]="field.name"
      [id]="field.name"
    >
      <option *ngFor="let option of field.options" [value]="option">{{ option }}</option>
    </select>
  </div>

  <button type="submit">Submit</button>
</form>

This template dynamically renders the form fields as defined in the JSON file.

---

Running the Application

Use Angular CLI to run the project:

ng serve

Open your browser and navigate to:

http://localhost:4200

You should see a form with dynamically created fields for name, email, and country.

---

Conclusion

With Angular Reactive Forms and a JSON configuration file, you can build dynamic forms that are easy to maintain and extend. This technique is especially useful for admin panels, configuration dashboards, or survey forms, where form structure may change frequently.