Account registration form that shows different fields based on whether the user selects personal or business account type.

Live Demo

Material Material

Overview

This example demonstrates how to conditionally show business-specific fields only when the user selects a business account type.

Key patterns demonstrated:

  • Personal name field hidden for business accounts
  • Business fields (company name, tax ID) hidden for personal accounts
  • Required validation tied to visibility

Implementation

import { Component, signal } from '@angular/core';
import { DynamicForm, type FormConfig } from '@ng-forge/dynamic-forms';

@Component({
  selector: 'app-business-account-form',
  imports: [DynamicForm],
  template: `<form [dynamic-form]="config" [(value)]="formValue"></form>`,
})
export class BusinessAccountFormComponent {
  formValue = signal({});

  config = {
    fields: [
      {
        key: 'accountType',
        type: 'radio',
        value: 'personal',
        label: 'Account Type',
        required: true,
        options: [
          { value: 'personal', label: 'Personal Account' },
          { value: 'business', label: 'Business Account' },
        ],
      },
      {
        key: 'name',
        type: 'input',
        value: '',
        label: 'Full Name',
        required: true,
        logic: [
          {
            type: 'hidden',
            condition: {
              type: 'fieldValue',
              fieldPath: 'accountType',
              operator: 'equals',
              value: 'business',
            },
          },
        ],
      },
      {
        key: 'companyName',
        type: 'input',
        value: '',
        label: 'Company Name',
        logic: [
          {
            type: 'hidden',
            condition: {
              type: 'fieldValue',
              fieldPath: 'accountType',
              operator: 'notEquals',
              value: 'business',
            },
          },
          {
            type: 'required',
            condition: {
              type: 'fieldValue',
              fieldPath: 'accountType',
              operator: 'equals',
              value: 'business',
            },
          },
        ],
      },
      {
        key: 'taxId',
        type: 'input',
        value: '',
        label: 'Tax ID',
        logic: [
          {
            type: 'hidden',
            condition: {
              type: 'fieldValue',
              fieldPath: 'accountType',
              operator: 'notEquals',
              value: 'business',
            },
          },
          {
            type: 'required',
            condition: {
              type: 'fieldValue',
              fieldPath: 'accountType',
              operator: 'equals',
              value: 'business',
            },
          },
        ],
      },
      {
        key: 'numberOfEmployees',
        type: 'input',
        value: null,
        label: 'Number of Employees',
        props: { type: 'number' },
        logic: [
          {
            type: 'hidden',
            condition: {
              type: 'fieldValue',
              fieldPath: 'accountType',
              operator: 'notEquals',
              value: 'business',
            },
          },
        ],
      },
      {
        key: 'email',
        type: 'input',
        value: '',
        label: 'Email Address',
        required: true,
        email: true,
      },
      {
        type: 'submit',
        key: 'submit',
        label: 'Create Account',
      },
    ],
  } as const satisfies FormConfig;
}

How It Works

Account Type Toggle

The form uses radio buttons to switch between personal and business accounts:

{
  key: 'accountType',
  type: 'radio',
  value: 'personal',
  options: [
    { value: 'personal', label: 'Personal Account' },
    { value: 'business', label: 'Business Account' },
  ],
}

Personal vs Business Fields

Personal fields are hidden when business is selected:

{
  key: 'name',
  type: 'input',
  logic: [{
    type: 'hidden',
    condition: {
      type: 'fieldValue',
      fieldPath: 'accountType',
      operator: 'equals',
      value: 'business',
    },
  }],
}

Business fields are hidden when personal is selected:

{
  key: 'companyName',
  type: 'input',
  logic: [{
    type: 'hidden',
    condition: {
      type: 'fieldValue',
      fieldPath: 'accountType',
      operator: 'notEquals',
      value: 'business',
    },
  }],
}

Use Cases

  • User registration with account types
  • Subscription forms with tiers
  • Customer onboarding flows
  • Multi-tenant application signup