Skip to main content

​
Introduction to Mat Dynamic Form

Mat Dynamic Form is an Angular library that simplifies form creation by allowing you to generate fully functional, Material Design forms from simple JSON configurations. Instead of writing verbose HTML templates and component logic, you define your form structure once and let the library handle the rest.

​
Why Mat Dynamic Form?

Traditional Angular forms require writing extensive boilerplate code for every field, validator, and interaction. Mat Dynamic Form eliminates this complexity:

Traditional Approach

  • Write HTML for each form field
  • Define FormControls manually
  • Wire up validators individually
  • Handle events with custom logic
  • Manage complex layout markup

Mat Dynamic Form

  • Define form as JSON configuration
  • Automatic FormGroup generation
  • Built-in validation support
  • Event handling through actions
  • Responsive grid layout included

​
Key Features

​
JSON-Driven Configuration

Define your entire form structure using TypeScript classes that serialize to clean, maintainable configurations: 
const formStructure = new FormStructure();
formStructure.nodes = [
  new Input('email', 'Email Address'),
  new InputPassword('password', 'Password'),
  new DatePicker('birthDate', 'Birth Date')
];

​
Rich Form Controls

Mat Dynamic Form provides a comprehensive set of Material Design form controls out of the box:
  • Text Inputs: Input, InputPassword, TextArea, InputNumber
  • Selection: Dropdown, RadioGroup, AutoComplete, Checkbox, Switch
  • Date/Time: DatePicker, DateTimePicker, TimePicker, DateRangePicker
  • File Upload: InputFile with drag-and-drop support
  • Custom: CustomNode for integrating your own components
  • Actions: Button with built-in form validation

​
Built-in Validation

Seamlessly integrate Angular’s powerful validators: 
new Input('username', 'Username').apply({
  validator: [Validators.required, Validators.minLength(3)],
  errorMessage: 'Username must be at least 3 characters'
})
Apply global validators to all fields at once: 
formStructure.globalValidators = Validators.required;

​
Dynamic Form Manipulation

Add or remove fields dynamically based on user input: 
if (hasPet === 'yes') {
  formStructure.createNodes(5, [
    new Input('petName', 'Pet Name'),
    new Dropdown('petType', 'Pet Type', [
      new OptionChild('Dog', 'dog'),
      new OptionChild('Cat', 'cat')
    ])
  ]);
}

​
Reactive Programming

Access the underlying Angular FormGroup for full reactive form capabilities: 
const formData = formStructure.getValue<MyFormModel>();
formStructure.patchValue({ email: '[email protected]' });
formStructure.getControlById('email').valueChanges.subscribe(...);

​
Material Design Theming

Choose from Material Design form field appearances: 
formStructure.appearance = 'outline'; // 'fill' | 'outline' | 'standard'

​
Event System

Attach actions to any form control: 
new Input('search', 'Search').apply({
  action: {
    type: 'valueChange',
    onEvent: (param) => {
      console.log('Search value:', param.event);
      // param.structure provides access to entire form
    }
  }
})

​
Real-World Benefits

Build complex forms in minutes instead of hours. A complete sign-up form with validation can be created in under 50 lines of code.
Form configurations are declarative and easy to understand. Changes to fields, validation, or layout require minimal code updates.
All forms automatically follow Material Design guidelines with consistent spacing, validation messages, and responsive behavior.
Full TypeScript support with strongly-typed form values, validators, and event handlers.

​
Comparison: Before and After

<form [formGroup]="signupForm">
  <mat-form-field appearance="outline">
    <mat-label>Name</mat-label>
    <input matInput formControlName="name" maxlength="100">
    <mat-icon matPrefix>person</mat-icon>
    <mat-error *ngIf="signupForm.get('name')?.hasError('required')">
      Name is required
    </mat-error>
  </mat-form-field>
  
  <mat-form-field appearance="outline">
    <mat-label>Email</mat-label>
    <input matInput type="email" formControlName="email">
    <mat-icon matPrefix>email</mat-icon>
    <mat-error *ngIf="signupForm.get('email')?.hasError('email')">
      Invalid email
    </mat-error>
  </mat-form-field>
  
  <!-- More fields... -->
  
  <button mat-raised-button color="primary" 
          [disabled]="signupForm.invalid"
          (click)="onSubmit()">
    Submit
  </button>
</form>
The Mat Dynamic Form approach reduces boilerplate by approximately 60% while maintaining full type safety and reactive capabilities.

​
Get Started

Ready to build your first dynamic form?

Quick Start Guide

Follow our step-by-step tutorial to create your first Mat Dynamic Form in under 5 minutes.

​
Browser Support

Mat Dynamic Form supports all modern browsers:
  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
Internet Explorer 11 is not supported. The library requires Angular 11+ which dropped IE11 support.

Build docs developers (and LLMs) love

Get started for freeTalk to us