Examples
Form Wizard
Multi-step form with constraint-gated advancement, async validation, and persistence for save-and-resume.
Try it
Fill in each step and click Next. The button is disabled until the step validates. Go back to see data preserved. Try “taken@test.com” for async email validation.
How it works
A wizard module manages step state and field data, while a validation module handles async checks – composed with constraint ordering and persistence.
- Facts –
currentStep, per-step field facts (email,password,name,plan), andadvanceRequested - Derivations – per-step validators (
step0Valid,step1Valid,step2Valid),currentStepValid,canAdvance, andprogresspercentage - Constraints –
advance(priority 50) only fires when bothadvanceRequestedandcurrentStepValidare true - Persistence –
persistencePluginsaves field values and current step, enabling save-and-resume across page reloads
Summary
What: A three-step form wizard with per-step validation, async email availability checks, and persistent draft state.
How: Derivations compute step validity. The advance constraint gates on currentStepValid, preventing advancement until all fields pass. The persistence plugin saves progress automatically.
Why it works: Constraint-gated advancement replaces imperative validation chains. Back navigation preserves all data because facts persist until explicitly cleared. The persistence plugin enables resume without any custom save logic.
Source code
// Source file "form-wizard.ts" not found
