@ng-forge/dynamic-forms-material

Material Design field components for @ng-forge/dynamic-forms.

Experimental API Notice: This library uses Angular's experimental Signal Forms API. Angular may introduce breaking changes in patch releases. Check the compatibility matrix below.

Compatibility

| @ng-forge/dynamic-forms-material | @ng-forge/dynamic-forms | Angular | | -------------------------------- | ----------------------- | ------------- | | 0.1.1+ | 0.1.1+ | >=21.0.2 | | 0.1.0 | 0.1.0 | 21.0.0-21.0.1 |

Installation

npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-material @angular/material

Setup

// app.config.ts
import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withMaterialFields } from '@ng-forge/dynamic-forms-material';

export const appConfig: ApplicationConfig = {
  providers: [provideDynamicForm(...withMaterialFields())],
};

Usage

import { DynamicForm, type FormConfig, type InferFormValue } from '@ng-forge/dynamic-forms';

@Component({
  imports: [DynamicForm],
  template: `<form [dynamic-form]="config" (submitted)="onSubmit($event)"></form>`,
})
export class ContactFormComponent {
  config = {
    fields: [
      { key: 'name', type: 'input', value: '', label: 'Name', required: true, props: { appearance: 'outline' } },
      {
        key: 'email',
        type: 'input',
        value: '',
        label: 'Email',
        required: true,
        email: true,
        props: { appearance: 'outline', prefixIcon: 'email' },
      },
      { type: 'submit', key: 'submit', label: 'Send', props: { color: 'primary' } },
    ],
  } as const satisfies FormConfig;

  onSubmit(value: InferFormValue<typeof this.config.fields>) {
    console.log('Form submitted:', value);
  }
}

Global Configuration

provideDynamicForm(
  ...withMaterialFields({
    appearance: 'outline',
    subscriptSizing: 'dynamic',
  }),
);

Field Types

Input, Textarea, Select, Checkbox, Radio, Datepicker, Slider, Toggle, Multi-Checkbox, Button, Submit, Next, Previous

Documentation

• Material Integration
• Field Types
• Validation
• Conditional Logic

Changelog

See GitHub Releases.

Contributing

Contributions are welcome! Please read our Contributing Guide.

License

MIT © ng-forge