Building Dynamic Forms in Angular Using JSON Schema and Signals

JSON Schema-Driven Forms in Angular: A Signal-Based Approach

Forms are ubiquitous in modern web applications—registration flows, onboarding sequences, product configuration tools, surveys, admin interfaces, and more. Yet manually coding each form field by field becomes difficult to sustain, especially when requirements shift frequently. What if the interface could adjust itself to configurations without requiring changes to the Angular component each time?

That is precisely what JSON-driven dynamic forms deliver.

Rather than declaring form controls by hand, you define the structure in a JSON file or retrieve it from an API. Angular then renders the UI dynamically from that definition. With the arrival of Angular Signals, this pattern becomes even more effective—more reactive, more dependable, and considerably cleaner.

In this post, we examine how to design a fully dynamic form system using JSON Schema and Angular Signals, keeping the discussion at the conceptual level.

The Case for JSON Schema in Form Design

Hardcoded forms come with a set of recurring drawbacks:

• Adding a field requires changes in both the template and the TypeScript code.
• Validation logic gets duplicated across forms.
• Different roles or contexts often demand different variants of the same form.
• Business stakeholders tend to revise requirements faster than developers can modify code.

With JSON Schema, the situation changes:

• The form definition lives outside the application codebase.
• The UI is configuration-driven rather than code-driven.
• Changes take effect immediately—update the JSON, refresh the view.
• A single component can render a wide variety of forms dynamically.

This approach appears in enterprise workflow engines, onboarding platforms, HR systems, survey tools, CMS-driven interfaces, and no-code form builders.

The Architecture at a Glance

A dynamic form system rests on five core components:

Below is a sample JSON file illustrating the structure:

{
  "title": "User Registration",
  "fields": [
    {
      "type": "text",
      "label": "First Name*",
      "name": "firstName",
      "validations": { "required": true, "minLength": 3 }
    },
    {
      "type": "text",
      "label": "Last Name*",
      "name": "lastName",
      "validations": { "required": true }
    },
    {
      "type": "email",
      "label": "Email",
      "name": "email",
      "validations": { "required": false }
    },
    {
      "type": "select",
      "label": "Country*",
      "name": "country",
      "options": ["Bangladesh", "Poland", "Turkey"],
      "validations": { "required": true }
    },
    {
      "type": "checkbox",
      "label": "Accept Terms*",
      "name": "terms",
      "validations": { "requiredTrue": true }
    }
  ]
}

1. The JSON Schema

This is a plain JSON file or API payload that defines:

• The form's title
• The collection of fields
• Field types (text, email, select, checkbox, and so on)
• Validation constraints (required, minLength, requiredTrue)
• Options for select dropdowns

The backend or a CMS can modify this definition at any time without touching Angular code.

2. Dynamic Form Service

This service is responsible for loading the schema—either from local assets or via an API call.
Its responsibilities include:

• Fetching the form metadata.
• Preparing initial values.
• Passing the schema along to the component.

By isolating the fetching logic, the component stays focused and uncluttered.

3. Signals for Managing Form State

Signals offer a highly reactive way to handle UI state. They remove the need for manual subscriptions and simplify change detection.

A signal-based dynamic form typically tracks:

• fields: the definitions for each field
• title: the form's heading
• values: a map of current user input
• touched: records which fields the user has interacted with
• errors (computed): validation messages that recalculate automatically
• isValid (computed): determines whether the form can be submitted

Whenever a value changes, signals push updates to the UI immediately—no explicit subscriptions required.

4. Dynamic Rendering in the Template

The template contains no hardcoded form fields.

Instead, it iterates over the schema and renders:

• Text or email input elements
• Select dropdowns
• Checkboxes
• Validation error messages

The appropriate UI control appears automatically based on the field type.
Add a new field to the JSON, and it shows up in the interface instantly.

That is the essence of configuration-driven rendering.

5. Submission Flow

When the form passes validation and is submitted:

• The state held in the signals is gathered.
• It is then processed—for example, sent to an API.

Since the form is schema-driven, the submission handler is the only piece that remains static.

Why Signals Elevate the Pattern

Before Signals existed, dynamic forms relied heavily on reactive forms with extensive control creation, subscription logic, and boilerplate. Signals cut through much of that complexity.

Notable benefits include:

• Derived values like errors and validation states recompute automatically.
• No need to manage subscriptions or manually unsubscribe.
• A more predictable, state-centric architecture.
• A simpler mental model: "state in, UI out."

Signals fit naturally with the concept of treating the form as state.

How Data Flows Through the System

1. Angular loads the JSON schema.
2. The service converts it into fields, initial values, and touched state.
3. Signals hold form-related state in a reactive manner.
4. The template renders UI based on the schema fields.
5. User interactions update the signals instantly.
6. Computed validations re-evaluate automatically.
7. The submit button activates once all validations are satisfied.
8. Final values are submitted or logged.

This results in a workflow that is clean, maintainable, and scalable.

Where This Pattern Applies

This design shows up in a variety of contexts:

• Form builders for no-code platforms.
• HR onboarding systems where questions vary by role.
• Admin dashboards with frequently changing fields.
• Multi-step wizard flows.
• Dynamic landing pages managed via CMS.
• Configuration screens in SaaS products.

The idea is straightforward: instead of modifying Angular code, you ship an updated JSON file.

When to Adopt This Approach

This pattern proves most valuable under these conditions:

• Form fields are subject to frequent changes.
• Multiple forms can share the same rendering logic.
• You want non-developers to update form UI through JSON.
• You are aiming for a clean, maintainable Angular codebase.
• You are building a reusable form engine.

For forms that rarely change, manual implementation might still be simpler. But for dynamic, data-driven interfaces, combining JSON with Signals is an ideal solution.

Closing Thoughts

Dynamic forms built on JSON Schema and Angular Signals bring together two strong concepts:

• Configuration-driven UI
  
• Reactive state management
  

Together, they enable the creation of form systems that are flexible, maintainable, and scalable—able to respond to business needs in real time.

This strategy eliminates repetitive form code, cuts down on UI maintenance overhead, and allows forms to evolve without requiring a redeployment.

Stackblitz Link: