# @ng-forge/dynamic-forms-primeng
PrimeNG field components for [@ng-forge/dynamic-forms](https://www.npmjs.com/package/@ng-forge/dynamic-forms).
[](https://github.com/ng-forge/ng-forge/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/@ng-forge/dynamic-forms-primeng)
[](https://www.npmjs.com/package/@ng-forge/dynamic-forms-primeng)
[](https://angular.dev)
[](https://opensource.org/licenses/MIT)
[](https://discord.gg/qpzzvFagj3)
> **Stability:** This library is built on Angular Signal Forms, which is stable as of Angular v22.
> Check the [compatibility matrix](#compatibility) below for supported Angular versions.
## Compatibility
| Angular | @ng-forge/dynamic-forms-primeng |
| ------- | ------------------------------- |
| 22.x | 1.x |
| 21.x | 0.x (experimental) |
Versioned in lockstep with `@ng-forge/dynamic-forms`. The `0.x` line targets Angular 21 (experimental Signal Forms). Each release pins its Angular requirement via `peerDependencies`; npm warns on a mismatch.
PrimeNG has not yet published a release that officially supports Angular 22. This package's test suite passes against PrimeNG 21.x running on Angular 22.
## Installation
```bash
npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-primeng primeng @primeuix/themes primeicons
```
## Setup
```typescript
// app.config.ts
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';
import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withPrimeNGFields } from '@ng-forge/dynamic-forms-primeng';
export const appConfig: ApplicationConfig = {
providers: [
providePrimeNG({
theme: {
preset: Aura,
},
}),
provideDynamicForm(...withPrimeNGFields()),
],
};
```
```scss
// styles.scss
@import 'primeicons/primeicons.css';
```
## Usage
```typescript
import { DynamicForm, type FormConfig, type InferFormValue } from '@ng-forge/dynamic-forms';
@Component({
imports: [DynamicForm],
template: ``,
})
export class ContactFormComponent {
config = {
fields: [
{ key: 'email', type: 'input', value: '', label: 'Email', required: true, email: true },
{ type: 'submit', key: 'submit', label: 'Submit', props: { severity: 'primary' } },
],
} as const satisfies FormConfig;
onSubmit(value: InferFormValue) {
console.log('Form submitted:', value);
}
}
```
## Global Configuration
```typescript
provideDynamicForm(
...withPrimeNGFields({
variant: 'filled',
size: 'large',
severity: 'primary',
}),
);
```
## Field Types
Input, Textarea, Select, Checkbox, Toggle, Radio, Multi-Checkbox, Datepicker, Slider, Button, Submit, Next, Previous
## Addons
`prime-input` ships first-class `prefix` / `suffix` addon slots accepting the PrimeNG-specific `prime-icon` / `prime-button` kinds plus the universal `text` / `template` / `component` kinds. `withPrimeNGFields()` auto-registers them — no extra setup needed.
See [Addons / Overview](https://ng-forge.com/primeng/addons/overview), [Presets and Actions](https://ng-forge.com/primeng/addons/presets-and-actions), and [Custom Kinds](https://ng-forge.com/primeng/addons/custom-types) for the full surface (slots, kinds, presets, `actionRef`, reactive `hidden` / `disabled`, custom kind registration).
## Documentation
- [Feature overview](https://ng-forge.com/primeng/feature-overview)
- [PrimeNG Integration](https://ng-forge.com/primeng)
- [Field Types](https://ng-forge.com/primeng/field-types/text-inputs)
- [Validation](https://ng-forge.com/primeng/validation/basics)
- [Conditional Logic](https://ng-forge.com/primeng/dynamic-behavior/conditional-logic)
## Changelog
See [GitHub Releases](https://github.com/ng-forge/ng-forge/releases).
## Contributing
Contributions are welcome! Please read our [Contributing Guide](https://github.com/ng-forge/ng-forge/blob/main/CONTRIBUTING.md).
## License
MIT © ng-forge