106 lines
3.1 KiB
Markdown
106 lines
3.1 KiB
Markdown
# @workshack/form-builder
|
|
|
|
Workshack Form Builder Library provides typed FormGroup helpers and utilities for Angular reactive forms. This library integrates seamlessly with `@workshack/ui` and `@workshack/input` to provide a complete form building solution with strong TypeScript typing.
|
|
|
|
## Features
|
|
|
|
- 🔧 **Typed FormGroup Helpers** - Strongly typed reactive forms with IntelliSense support
|
|
- 🎮 **Gaming UI Integration** - Works seamlessly with @workshack/ui components
|
|
- 🎯 **Input Navigation** - Integrates with @workshack/input for gamepad/keyboard navigation
|
|
- 📝 **Form Validation** - Enhanced validation helpers with typed error messages
|
|
- 🚀 **Angular 20+** - Built for modern Angular applications
|
|
- 💡 **TypeScript First** - Full TypeScript support with strict typing
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @workshack/form-builder @workshack/ui @workshack/input
|
|
```
|
|
|
|
## Quick Start
|
|
|
|
```typescript
|
|
import { FormBuilderModule } from '@workshack/form-builder';
|
|
|
|
@NgModule({
|
|
imports: [
|
|
FormBuilderModule,
|
|
// ... other imports
|
|
],
|
|
})
|
|
export class AppModule { }
|
|
```
|
|
|
|
## Dependencies
|
|
|
|
This library requires the following peer dependencies:
|
|
|
|
- `@angular/core`: ^20.1.3
|
|
- `@angular/common`: ^20.1.3
|
|
- `@angular/forms`: ^20.1.3
|
|
- `@workshack/ui`: ^1.0.0
|
|
- `@workshack/input`: ^1.0.0
|
|
|
|
## Documentation
|
|
|
|
> 📚 **Coming Soon**: Detailed documentation and examples will be added when the typed FormGroup helpers are implemented.
|
|
|
|
### Planned Features
|
|
|
|
- **TypedFormGroup<T>** - Strongly typed FormGroup with IntelliSense
|
|
- **FormBuilderService** - Service for creating typed forms
|
|
- **ValidationHelpers** - Typed validation functions
|
|
- **FormFieldComponents** - Pre-built form field components
|
|
- **FormLayoutComponents** - Layout components for forms
|
|
|
|
## Example Usage (Planned)
|
|
|
|
```typescript
|
|
// Example of planned API - will be implemented soon
|
|
interface UserForm {
|
|
name: string;
|
|
email: string;
|
|
age: number;
|
|
}
|
|
|
|
const form = this.typedFormBuilder.group<UserForm>({
|
|
name: ['', [Validators.required]],
|
|
email: ['', [Validators.required, Validators.email]],
|
|
age: [0, [Validators.required, Validators.min(18)]]
|
|
});
|
|
|
|
// Full TypeScript support
|
|
form.get('name')?.value; // string | null
|
|
form.value; // Partial<UserForm>
|
|
```
|
|
|
|
## Integration with Workshack Libraries
|
|
|
|
This library is designed to work seamlessly with:
|
|
|
|
- **@workshack/ui** - Gaming-inspired UI components
|
|
- **@workshack/input** - Gamepad and keyboard navigation support
|
|
|
|
## License
|
|
|
|
This library is licensed under a custom license. See [LICENSE](./LICENSE) for details.
|
|
|
|
### Commercial Use
|
|
|
|
For commercial applications, attribution is required. Include the following in your application:
|
|
|
|
```
|
|
This application uses Workshack Form Builder Library (https://www.npmjs.com/package/@workshack/form-builder) © 2025 Workshack Team
|
|
```
|
|
|
|
## Contributing
|
|
|
|
This library is part of the Workshack ecosystem. For contributions and issues, please refer to the main repository.
|
|
|
|
## Changelog
|
|
|
|
### 1.0.0
|
|
- Initial release with basic module structure
|
|
- Ready for typed FormGroup helpers implementation
|
|
- Integration foundation for @workshack/ui and @workshack/input
|