Schema Form

import { WR_FIELD } from 'ngwr/form';
import { WrSchemaForm } from 'ngwr/schema-form';

@Component({
  imports: [WrSchemaForm],
})
export class MyComponent {}

Full name

Work email

We only use it for the invoice.

Plan

Seats

Starts on

Notes

I agree to the terms of service

import { form, metadata, required, schema } from '@angular/forms/signals';
import { WR_FIELD } from 'ngwr/form';

interface Signup {
  fullName: string;
  workEmail: string;
  role: string;
}

const signupSchema = schema<Signup>(path => {
  required(path.fullName);
  metadata(path.fullName, WR_FIELD, () => ({ kind: 'input', placeholder: 'Ada Lovelace' }));

  required(path.workEmail);
  metadata(path.workEmail, WR_FIELD, () => ({
    kind: 'input',
    type: 'email',
    label: 'Work email',
    hint: 'We only use it for the invoice.',
  }));

  metadata(path.role, WR_FIELD, () => ({ kind: 'select', label: 'Plan', options: PLANS }));
});

<wr-schema-form [field]="signup" [columns]="2" />

<wr-schema-form [field]="signup" [columns]="2" />

// The spec is a LogicFn, so it can read the rest of the form. An admin
// sees a longer list, and nothing in the template knows about it.
metadata(path.role, WR_FIELD, ctx => ({
  kind: 'select',
  options: ctx.stateOf(path.workEmail).value().endsWith('@acme.com') ? ALL_PLANS : PUBLIC_PLANS,
}));

Every one of them is already an Angular schema function that drives the control through [formField]. Repeating them in the spec would be a second source of truth for state the form already owns — and for the bounds it is not even possible: Angular refuses a [min] or [max] binding on a field-bound control outright (NG8022). The one thing this component adds is hidden(), which Angular's own docs say a template has to honour itself; a hidden field is drawn by nobody.

// State lives in the schema, never in the spec.
required(path.workEmail);          // draws the * beside the label
disabled(path.seats, ({ valueOf }) => valueOf(path.role) === 'starter');
hidden(path.notes, ({ valueOf }) => !valueOf(path.agree));
min(path.seats, 1);
max(path.seats, 500);

// This does not compile — NG8022. The field owns the bound.
// <wr-input-number [formField]="f.seats" [min]="1" />

That is also the escape hatch. Point [field] at a nested object field to draw one section, and write the fields that need real markup — a colour picker, a transfer list, anything with a layout of its own — by hand beside it. The two halves bind to the same form.

<!-- Draw most of the form, then write the one field by hand. -->
<wr-schema-form [field]="signup.address" [columns]="2" />

<wr-form-field label="Signature">
  <wr-color-picker [formField]="signup.brandColor" />
</wr-form-field>

That is the default because a model nests for reasons a screen knows nothing about, and because a group has a presentation of its own — a heading, a fieldset, a column count that need not match its parent's — which the spec does not describe. So a group is drawn by pointing a second <wr-schema-form> at it, with whatever markup belongs around it.

<!-- `address` is a group: the parent draws none of it. -->
<wr-schema-form [field]="signup" [columns]="2" />

<h3>Address</h3>
<wr-schema-form [field]="signup.address" [columns]="2" />

Describing the children of a group and then getting none of them is never what anyone meant, and it does not look like a mistake — nothing is missing from the page, so a half-drawn form reads as a finished one. That exact shape warns in development. A group nobody described inside stays silent, because it is a model detail this screen is not rendering.

Name	Description	Type	Default
`field`required	The form to draw — the value `form()` returned, or any object-valued field inside one.	`FieldTree<T>`	—
`columns`	Grid columns. A field spans one of them unless its spec says otherwise.	`number`	`1`

Installation

Basic usage

Layout

A spec is a function, so it can react

What the spec deliberately does not carry

A field with no spec is skipped

A nested group is one form each

API

See also

CSS variables