@ng-forge/dynamic-forms-bootstrap

Bootstrap 5 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-bootstrap | @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 |

Installation

``bash
npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-bootstrap bootstrap
`

Setup

`scss
// styles.scss
@import 'bootstrap/dist/css/bootstrap.min.css';
`

`typescript
// app.config.ts
import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withBootstrapFields } from '@ng-forge/dynamic-forms-bootstrap';

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

Usage

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

@Component({
imports: [DynamicForm],
template:

onSubmit(value: InferFormValue) {
console.log('Form submitted:', value);
}
}
`

Global Configuration

`typescript
provideDynamicForm(
...withBootstrapFields({
floatingLabel: true,
size: 'lg',
variant: 'primary',
}),
);
``

Field Types

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

Documentation

- Bootstrap Integration
- Field Types
- Validation
- Conditional Logic

Changelog

See GitHub Releases.

Contributing

Contributions are welcome! Please read our Contributing Guide.

License

MIT © ng-forge