FORGE YOUR
NEXT FORM

Hand ForgeForm a TypeScript schema and get back a fully-wired Angular reactive form - validation, errors and conditional fields, free.

Angular 21+Schema-drivenStandaloneSignal-basedReactive Forms

01. SCHEMA-DRIVEN

JSON in, form out.

Declare controls as a config. The engine builds the whole Reactive Form for you.

02. SIGNAL-REACTIVE

Reads like a signal.

Form value and validity are signals. Read them in templates, computeds and effects. No subscriptions.

03. BUILT-IN TOOLS

Utilities ready to use.

Validation, with messages placed automatically. Conditional visibility. Hints. Themes.

04. CUSTOMIZATION

Plug in your components.

Pass in your own components as errors or hints. Style the form as you wish. No irritating overrides.

forge-form · live playground

FormSchemaedit to update live

{
  "updateOn": "blur",
  "options": {
    "orientation": "column",
    "theme": "default"
  },
  "controls": [
    {
      "type": "text",
      "controlName": "firstName",
      "label": "First name",
      "placeholder": "Enter your first name",
      "validators": [
        {
          "type": "required"
        },
        {
          "type": "minlength",
          "value": 3
        }
      ]
    },
    {
      "type": "number",
      "controlName": "age",
      "label": "Age",
      "placeholder": "0",
      "validators": [
        {
          "type": "required"
        }
      ]
    },
    {
      "type": "checkbox",
      "controlName": "employed",
      "label": "Currently employed?",
      "updateOn": "change",
      "options": {
        "labelOrientation": "row"
      }
    },
    {
      "type": "select",
      "controlName": "plan",
      "label": "Plan",
      "placeholder": "Pick a plan",
      "items": [
        {
          "label": "Free",
          "value": "free"
        },
        {
          "label": "Pro",
          "value": "pro"
        },
        {
          "label": "Enterprise",
          "value": "enterprise"
        }
      ]
    }
  ]
}

Rendered output

// form.value() - signal, live

{"firstName":null,"age":null,"employed":null,"plan":null}

Try it now.

npm i @forge-form/angular

Read the docs Check on GitHub

FORGE YOUR NEXT FORM