Form Engine

A product-style form that keeps validation, dirty state, derived summaries, and async save flow in observables. The visible UI is reactive, but the state remains simple.

Dirty fields

changes since the last save

Validation errors

blocking save right now

Estimated monthly

derived from plan, seats, and add-ons

Completion

required fields in good shape

Save state

Account

Primary identity and contact details.

Organization

Company name changed

Shown on invoices and the internal summary cards.

Owner name changed

The person responsible for the draft.

Contact

Primary email changed

Used for save confirmations and review notes.

Billing email changed

Separate from the primary contact if needed.

Project

Timeline, scope, and delivery pressure.

Timeline

Project title changed

Used as the main label in the summary.

Launch date changed

Priority changed

Raises the derived monthly estimate when urgent.

Scope

Plan changed

Feeds the derived pricing summary.

Seats changed

Affects the per-seat estimate.

Support pack Audit logs CSV export

Notes

Freeform context for reviewers and implementers.

Implementation notes changed

Optional, but useful when the form becomes a real intake flow.

What updates

This example keeps field values, the clean baseline, and async save progress in the same observable model.

Derived totals

Monthly price, completion, and save state all react to the same form state.

Dirty tracking

Each field compares its live value to the last committed baseline.

Async save

Saving animates progress while the form stays interactive, then commits every baseline together.

Validation

Everything required is in good shape.

Save flow

Nothing is unsaved right now.