Angular Material integration for @ng-forge/dynamic-forms. Pre-built Material Design form components.
npm install @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.
| @ng-forge/dynamic-forms-material | @ng-forge/dynamic-forms | Angular |
| -------------------------------- | ----------------------- | ------------- |
| 0.5.x | 0.5.x | >=21.1.0 |
| 0.4.x | 0.4.x | >=21.1.0 |
| 0.3.x | 0.3.x | 21.0.7-21.0.x |
| 0.2.x | 0.2.x | 21.0.6 |
| 0.1.1+ | 0.1.1+ | 21.0.2-21.0.5 |
| 0.1.0 | 0.1.0 | 21.0.0-21.0.1 |
``bash`
npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-material @angular/material
`typescript
// 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())],
};
`
`typescript
import { DynamicForm, type FormConfig, type InferFormValue } from '@ng-forge/dynamic-forms';
@Component({
imports: [DynamicForm],
template:
,
})
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) {
console.log('Form submitted:', value);
}
}
`Global Configuration
`typescript
provideDynamicForm(
...withMaterialFields({
appearance: 'outline',
subscriptSizing: 'dynamic',
}),
);
``Input, Textarea, Select, Checkbox, Radio, Datepicker, Slider, Toggle, Multi-Checkbox, Button, Submit, Next, Previous
- Material Integration
- Field Types
- Validation
- Conditional Logic
See GitHub Releases.
Contributions are welcome! Please read our Contributing Guide.
MIT © ng-forge