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

Dynamic reactive forms

  • 871