Playground

import { JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { FormField, email, form, required, submit } from '@angular/forms/signals';

import { WrButton } from 'ngwr/button';
import { WrCheckbox } from 'ngwr/checkbox';
import { WrFormField } from 'ngwr/form';
import { WrInput } from 'ngwr/input';
import { WrOption, WrSelect } from 'ngwr/select';

interface Signup {
  email: string;
  team: string;
  agree: boolean;
}

@Component({
  selector: 'demo-root',
  imports: [JsonPipe, FormField, WrButton, WrCheckbox, WrFormField, WrInput, WrOption, WrSelect],
  template: `
    <form (submit)="reserve($event)" style="display: flex; flex-direction: column; gap: 1rem; max-width: 26rem">
      <wr-form-field label="Work email" hint="We'll never share it." required>
        <input wrInput type="email" placeholder="[email protected]" [formField]="signup.email" />
      </wr-form-field>

      <wr-form-field label="Team size" required>
        <wr-select ariaLabel="Team size" placeholder="Pick one" [formField]="signup.team">
          <wr-option value="solo">Just me</wr-option>
          <wr-option value="small">2–10 people</wr-option>
          <wr-option value="large">More than 10</wr-option>
        </wr-select>
      </wr-form-field>

      <wr-form-field>
        <wr-checkbox [formField]="signup.agree">I agree to the terms</wr-checkbox>
      </wr-form-field>

      <button wr-btn type="submit" color="primary" style="align-self: flex-start">Reserve your spot</button>

      @if (submitted(); as value) {
        <pre>{{ value | json }}</pre>
      }
    </form>
  `,
})
export class Demo {
  private readonly model = signal<Signup>({ email: '', team: '', agree: false });

  // Two bindings and nothing in between: `[formField]` writes the component's
  // own `value` / `checked` model, because each of these ngwr controls implements
  // `FormValueControl` itself. There is no ControlValueAccessor in the library.
  protected readonly signup = form(this.model, path => {
    required(path.email);
    email(path.email);
    required(path.team);
    required(path.agree);
  });

  protected readonly submitted = signal<Signup | null>(null);

  protected reserve(event: Event): void {
    event.preventDefault();
    void submit(this.signup, () => {
      this.submitted.set(this.model());
      // undefined means "the server found nothing wrong" — a real action would
      // POST here and map a 4xx onto the field it belongs to.
      return Promise.resolve(undefined);
    });
  }
}