Dynamic reactive forms
What is it?
Source: https://angular.io/guide/dynamic-form
Why?
- Large forms
- Multiple forms across the application
- Quick prototyping
When not to...
- Simple forms that hardly ever change
- Very specific form functionality
Challenges
- Look and feel
- Applying conditional validation
- Extensibility
- Config long JSON / Arrays
FormQL
Ngrx
Reactive forms
Dynamic component loader
GraphQL
FormQL
- Drag and drop Editor
- CSS grid template
- Conditional Validation
- Custom components
Demo
Component
Component
Section
Page
Page
Layout
Section
Form Metadata
Form Metadata
The form representation
The FormGroup
Component
Component
Section
Page
Page
Layout
Section
FormControl
FormControl
FormGroup
FormGroup
FormGroup
FormGroup
FormGroup
Store Service
Component
Form Metadata
RF FormGroup
Store Service dictates validation rules with new state
FormGroup applies validation rules from new state
App architecture
FormQL
Angular App
Layouts
Sections
Pages
Components
Validators
Store Service
API Service
Custom components
Custom layouts
Custom components
Custom Validators
Loaded using dynamic component loader
Custom Service
FormQL
- @formql/core
- @formql/editor
- @formql/material
Roadmap
- Bundles for other design systems
- Responsive design
- 1:N relationship
- Wizard feature
- i18n and l10n
Thank you
@juanstoppa
@formql_io
Dynamic reactive forms
By Juan Stoppa
