A sophisticated, framework-agnostic form and input management library with comprehensive validation, TypeScript support, and advanced architecture patterns.
Everything you need for sophisticated, framework-agnostic form handling
Designed to work with any framework. Core form and input management is framework-independent. React adapter available now, others coming in v2.0.
Sophisticated form state management, field binding, lifecycle control, and input engine with modular variants and parsing strategies.
18+ built-in validators with country-specific support for 12+ countries. Special focus on Swiss formats (NPA, AHV, phone numbers).
Built with sophisticated IoC container, reactive state management through observables, and optimized notification system.
Efficient validation with batching and debouncing. Lazy dependency resolution for optimal performance.
Full TypeScript support with comprehensive type definitions. Catch errors at compile time, not runtime.
Validate across multiple countries simultaneously with sophisticated regex pattern system and country-specific rules.
Built with enterprise-grade patterns and modern best practices
Advanced dependency injection with lazy resolution, lifecycle management, and circular dependency detection.
Observer pattern implementation with reactive programming foundation for real-time form state management.
High-performance batched notification manager with priority queuing and microtask scheduling.
Sophisticated factory pattern with specialized builder services for different input types and validation strategies.
Extensible validation and parsing strategies with country-specific implementations and custom parsers.
Pick and choose components as needed. Extensible design makes it easy to add new validators and country support.
One form engine, multiple framework adapters
// 1. Define your form schema (framework-agnostic core)
import {
fileDescriptorMock, GenericValidationBuilder,
requiredDataValidationMock, minLengthValidationMock,
Validators
} from 'formular.dev.lib'
// Create validation rules
const emailValidation = new GenericValidationBuilder()
.setConstraints([
requiredDataValidationMock('email', true),
Validators.email('email', true).build()
])
.build()
const phoneValidation = new GenericValidationBuilder()
.setConstraints([
Validators.phoneNumber('phone', ['CH', 'US', 'FR']).build()
])
.build()
// Create field descriptors
const emailField = fileDescriptorMock('email', 'Email Address', 'email', emailValidation, [])
const phoneField = fileDescriptorMock('phone', 'Phone Number', 'tel', phoneValidation, [])
// React adapter with FormularForm and hooks
import { useService } from '@adapters/react/services/use-service'
import { useField } from '@adapters/react/fields/hooks/use-field'
import FormularForm from '@components/formular-form/formular-form'
import InputText from '@components/input-text/input-text'
import { SFormularManager } from 'formular.dev.lib'
function UserRegistrationForm() {
const { getService } = useService()
const formularManager = getService(SFormularManager)
// Create form from descriptors
const formular = formularManager?.createFromDescriptors(
'user-registration',
[emailField, phoneField]
)
const handleSubmit = (data) => {
console.log('Form submitted:', data)
}
return (
<FormularForm formular={formular} onSubmit={handleSubmit}>
<InputText fieldName="email" />
<InputText fieldName="phone" />
<button type="submit">Submit</button>
</FormularForm>
)
}
// Vue composables with reactivity
<template>
<FormularForm
:formular="formular"
@submit="handleSubmit"
>
<InputText field-name="email" />
<InputText field-name="phone" />
<button type="submit" :disabled="!formular?.isValid">
Submit
</button>
</FormularForm>
</template>
<script setup>
import { useFormularManager } from 'formular.dev.vue'
const { createFromDescriptors } = useFormularManager()
const formular = createFromDescriptors(
'user-registration',
[emailField, phoneField]
)
const handleSubmit = (data) => {
console.log('Form submitted:', data)
}
</script>
// Angular service integration
@Component({
selector: 'app-user-form',
template: `
<formular-form
[formular]="formular"
(onSubmit)="handleSubmit($event)">
<formular-input
fieldName="email">
</formular-input>
<formular-input
fieldName="phone">
</formular-input>
<button type="submit" [disabled]="!formular?.isValid">
Submit
</button>
</formular-form>
`
})
export class UserFormComponent {
formular = this.formularService.createFromDescriptors(
'user-registration',
[this.emailField, this.phoneField]
)
constructor(private formularService: FormularService) {}
handleSubmit(data: any) {
console.log('Form submitted:', data)
}
}
// Pure JavaScript integration
import { FormularManager, DOMAdapter } from 'formular.dev.vanilla'
// Create form manager with service container
const formularManager = new FormularManager(serviceManager, notificationManager)
// Create form from descriptors
const formular = formularManager.createFromDescriptors(
'user-registration',
[emailField, phoneField]
)
// Bind to existing HTML form
const domAdapter = new DOMAdapter(formular)
domAdapter.bindToForm('#user-registration-form')
// Listen to form events
formular.notificationManager.subscribe('validation', (field, isValid, errors) => {
const errorDiv = document.querySelector(`#${field.name}-errors`)
errorDiv.innerHTML = errors.map(err => `<span>${err.message}</span>`).join('')
})
formular.notificationManager.subscribe('submit', (data) => {
console.log('Form submitted:', data)
})
FORMULAR is an open-source project that thrives on community contributions. Whether you're fixing bugs, adding features, improving documentation, or sharing ideas, your contributions make FORMULAR better for everyone.
Found a bug or have a feature request? Help us improve by reporting issues on GitHub.
Submit pull requests for bug fixes, new features, or performance improvements.
Help others by improving documentation, writing tutorials, or creating examples.
Help expand FORMULAR's reach by contributing framework-specific adapters and integrations. We're actively looking for contributors to develop specialized hooks, components, and utilities for planned v2.0 framework support.
First implementation available. Provides React-specific hooks, context providers, and component wrappers for the core form engine.
Planned for v2.0: Angular services, directives, and reactive forms integration for seamless Angular development.
Planned for v2.0: Vue 3 composables, plugins, and reactive integrations using the Composition API.
Planned for v2.0: Svelte actions, stores, and component integrations for the growing Svelte ecosystem.