@ng-forge/dynamic-forms 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -0
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms--Qgd-rJE.mjs +7359 -0
- package/fesm2022/ng-forge-dynamic-forms-ng-forge-dynamic-forms--Qgd-rJE.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-page-field.component-DcZh9mv6.mjs +112 -0
- package/fesm2022/ng-forge-dynamic-forms-page-field.component-DcZh9mv6.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms-text-field.component-CnLc464X.mjs +113 -0
- package/fesm2022/ng-forge-dynamic-forms-text-field.component-CnLc464X.mjs.map +1 -0
- package/fesm2022/ng-forge-dynamic-forms.mjs +2 -0
- package/fesm2022/ng-forge-dynamic-forms.mjs.map +1 -0
- package/package.json +51 -0
- package/types/ng-forge-dynamic-forms.d.ts +3462 -0
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/ng-forge/ng-forge/main/logo-light.svg" alt="ng-forge logo" width="400"/>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
# @ng-forge/dynamic-forms
|
|
6
|
+
|
|
7
|
+
Core library for building type-safe, dynamic Angular forms with signal forms integration.
|
|
8
|
+
|
|
9
|
+
[](https://www.npmjs.com/package/@ng-forge/dynamic-forms)
|
|
10
|
+
[](https://opensource.org/licenses/MIT)
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-material
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Quick Start
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
// app.config.ts
|
|
22
|
+
import { provideDynamicForm } from '@ng-forge/dynamic-forms';
|
|
23
|
+
import { withMaterialFields } from '@ng-forge/dynamic-forms-material';
|
|
24
|
+
|
|
25
|
+
export const appConfig: ApplicationConfig = {
|
|
26
|
+
providers: [provideDynamicForm(...withMaterialFields())],
|
|
27
|
+
};
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
```typescript
|
|
31
|
+
// component.ts
|
|
32
|
+
import { DynamicForm, type FormConfig, type InferFormValue } from '@ng-forge/dynamic-forms';
|
|
33
|
+
|
|
34
|
+
@Component({
|
|
35
|
+
imports: [DynamicForm],
|
|
36
|
+
template: `<form [dynamic-form]="config" (submitted)="onSubmit($event)"></form>`,
|
|
37
|
+
})
|
|
38
|
+
export class UserFormComponent {
|
|
39
|
+
config = {
|
|
40
|
+
fields: [
|
|
41
|
+
{ key: 'email', type: 'input', value: '', label: 'Email', required: true, email: true },
|
|
42
|
+
{ key: 'password', type: 'input', value: '', label: 'Password', required: true, minLength: 8, props: { type: 'password' } },
|
|
43
|
+
{ type: 'submit', key: 'submit', label: 'Sign In' },
|
|
44
|
+
],
|
|
45
|
+
} as const satisfies FormConfig;
|
|
46
|
+
|
|
47
|
+
onSubmit(value: InferFormValue<typeof this.config.fields>) {
|
|
48
|
+
console.log('Form submitted:', value); // TypeScript infers: { email: string, password: string }
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Features
|
|
54
|
+
|
|
55
|
+
- **Signal Forms** - Native Angular 21+ signal forms integration
|
|
56
|
+
- **Type-Safe** - Full TypeScript inference with `InferFormValue`
|
|
57
|
+
- **UI Agnostic** - Bring your own UI or use official integrations
|
|
58
|
+
- **Validation** - Shorthand validators (`required`, `email`, `minLength`) and custom validators
|
|
59
|
+
- **Conditional Logic** - Dynamic visibility and validation based on form state
|
|
60
|
+
- **Container Fields** - Groups, rows, and pages for complex layouts
|
|
61
|
+
- **i18n Ready** - Observable/Signal support for labels and messages
|
|
62
|
+
- **Event System** - Custom events for buttons and form actions
|
|
63
|
+
|
|
64
|
+
## Documentation
|
|
65
|
+
|
|
66
|
+
- [Installation](https://ng-forge.com/dynamic-forms/installation)
|
|
67
|
+
- [Field Types](https://ng-forge.com/dynamic-forms/core/field-types)
|
|
68
|
+
- [Validation](https://ng-forge.com/dynamic-forms/core/validation)
|
|
69
|
+
- [Conditional Logic](https://ng-forge.com/dynamic-forms/core/conditional-logic)
|
|
70
|
+
- [Type Safety](https://ng-forge.com/dynamic-forms/core/type-safety)
|
|
71
|
+
- [Events](https://ng-forge.com/dynamic-forms/core/events)
|
|
72
|
+
- [i18n](https://ng-forge.com/dynamic-forms/core/i18n)
|
|
73
|
+
- [Custom Integrations](https://ng-forge.com/dynamic-forms/deep-dive/custom-integrations)
|
|
74
|
+
|
|
75
|
+
## License
|
|
76
|
+
|
|
77
|
+
MIT © ng-forge
|