angular dynamic form builder

If you want to build an Angular dynamic form builder, the usual approach is to:

1. Define form metadata (JSON/config)
2. Render fields dynamically based on that metadata
3. Create reactive forms with FormGroup, FormControl, FormArray
4. Support different field types like text, select, radio, checkbox, date, etc.

Here’s a simple starter pattern.

---

1) Form field model

export type FieldType =
  | 'text'
  | 'email'
  | 'password'
  | 'number'
  | 'textarea'
  | 'select'
  | 'radio'
  | 'checkbox'
  | 'date';

export interface FormField {
  key: string;
  label: string;
  type: FieldType;
  value?: any;
  required?: boolean;
  options?: { label: string; value: any }[];
  placeholder?: string;
  validators?: any[];
}

---

2) Example configuration

export const formFields: FormField[] = [
  {
    key: 'firstName',
    label: 'First Name',
    type: 'text',
    required: true,
    placeholder: 'Enter first name'
  },
  {
    key: 'email',
    label: 'Email',
    type: 'email',
    required: true,
    placeholder: 'Enter email'
  },
  {
    key: 'gender',
    label: 'Gender',
    type: 'select',
    required: true,
    options: [
      { label: 'Male', value: 'male' },
      { label: 'Female', value: 'female' }
    ]
  },
  {
    key: 'bio',
    label: 'Bio',
    type: 'textarea'
  }
];

---

3) Build the form dynamically

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormField } from './form-field.model';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html'
})
export class DynamicFormComponent implements OnInit {
  @Input() fields: FormField[] = [];
  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    const group: any = {};

    this.fields.forEach(field => {
      const validators = [];

      if (field.required) validators.push(Validators.required);

      group[field.key] = [
        field.value || '',
        validators
      ];
    });

    this.form = this.fb.group(group);
  }

  submit(): void {
    if (this.form.valid) {
      console.log(this.form.value);
    } else {
      this.form.markAllAsTouched();
    }
  }
}

---

4) Dynamic template

<form [formGroup]="form" (ngSubmit)="submit()">
  <ng-container *ngFor="let field of fields">
    <label>{{ field.label }}</label>

    <input
      *ngIf="field.type === 'text' || field.type === 'email' || field.type === 'password' || field.type === 'number' || field.type === 'date'"
      [type]="field.type"
      [formControlName]="field.key"
      [placeholder]="field.placeholder"
    />

    <textarea
      *ngIf="field.type === 'textarea'"
      [formControlName]="field.key"
      [placeholder]="field.placeholder"
    ></textarea>

    <select *ngIf="field.type === 'select'" [formControlName]="field.key">
      <option value="">Select</option>
      <option *ngFor="let opt of field.options" [value]="opt.value">
        {{ opt.label }}
      </option>
    </select>

    <div *ngIf="form.get(field.key)?.touched && form.get(field.key)?.invalid">
      <small *ngIf="form.get(field.key)?.errors?.['required']">
        {{ field.label }} is required
      </small>
    </div>
  </ng-container>

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

---

5) Use it from parent

<app-dynamic-form [fields]="formFields"></app-dynamic-form>

import { Component } from '@angular/core';
import { formFields } from './fields.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  formFields = formFields;
}

---

6) If you want a more advanced form builder

You can extend this with:

• nested groups
• form arrays
• conditional visibility
• custom validators
• async validators
• save/load form schema from backend
• drag-and-drop UI builder

---

If you want, I can give you:

1. a full Angular dynamic form builder project structure, or
2. a drag-and-drop form builder using Angular CDK.