Documentation / @zerotal/flow / index / Form

Abstract Class: Form

A reusable bundle of related form fields, their validation rules, and fill/reset helpers, mounted on a Component as a single @expose property.

Remarks

Declare fields as plain instance properties and their validation in rules (built with @zerotal/validator's fluent RuleBuilder). Bind inputs with value={this.form.email} (the compiler rewrites it to flow:model="form.email"). Validate either from the component (this.validate(this.form)) or directly (validate); both share the same engine and error shape. A Form round-trips through a synthesizer, so its class and methods survive hydration — the subclass must be imported (instantiated at least once) on the server.

Example

import { Component, expose, Form } from "@zerotal/flow";
import type { RuleBuilder } from "@zerotal/validator";

class LoginForm extends Form {
  email = "";
  password = "";
  rules(v: RuleBuilder) {
    return { email: v.string().email(), password: v.string().min(8) };
  }
}

class LoginPage extends Component {
  @expose form = new LoginForm();

  @expose async submit() {
    this.validate(this.form);        // throws + re-renders with errors on failure
    await Auth.attempt(this.form.data());
  }

  override async render() {
    return (
      <form data-flow-root flow:submit="submit">
        <input value={this.form.email} />
        <input type="password" value={this.form.password} />
        <button>Log in</button>
      </form>
    );
  }
}

Constructors

Constructor

new Form(): Form

Defined in: flow/src/Form.ts:88

Returns

Form

Properties

__isFlowForm

readonly __isFlowForm: true

Defined in: flow/src/Form.ts:86

Duck-type marker (avoids cross-module instanceof / import cycles).

Methods

rules()

rules(_v): Record<string, FieldRule>

Defined in: flow/src/Form.ts:103

Validation schema, built with the @zerotal/validator RuleBuilder. Override in the subclass; fields are required by default.

Parameters

_v

RuleBuilder

Returns

Record<string, FieldRule>

Example

rules(v: RuleBuilder) {
  return { email: v.string().email(), age: v.number().min(18).optional() };
}

data()

data(): Record<string, unknown>

Defined in: flow/src/Form.ts:108

The form's field values — own enumerable data props (excludes rules/methods/_*).

Returns

Record<string, unknown>

fill()

fill(values): this

Defined in: flow/src/Form.ts:118

Assign matching fields from a plain object (unknown keys ignored).

Parameters

values

Record<string, unknown>

Returns

this

reset()

reset(...fields): this

Defined in: flow/src/Form.ts:129

Reset fields to their declared defaults — all of them, or just the named ones.

Parameters

fields

...string[]

Returns

this

validate()

validate(): Record<string, unknown>

Defined in: flow/src/Form.ts:163

Validate the form against its rules (via @zerotal/validator).

Returns

Record<string, unknown>

the form's data on success.

Throws

on failure — the framework catches it and re-renders with errors.