@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

npm install @workshack/form-builder @workshack/ui @workshack/input

Quick Start

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 - 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)

// 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 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