Angular components that bind straight to Signal FormsSignal Forms.

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

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

@Component({
  selector: 'signup-card',
  imports: [FormField, WrFormField, WrInput, WrCheckbox, WrButton],
  template: `
    <wr-form-field label="Work email" required>
      <input wrInput type="email" [formField]="signup.email" />
    </wr-form-field>

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

    <wr-btn color="primary" block (click)="reserve()">
      Reserve your spot
    </wr-btn>
  `,
})
export class SignupCard {
  private readonly model = signal({ email: '', agree: false });

  // `signup.email` writes the input's value and `signup.agree` the checkbox's
  // `checked` model. No ControlValueAccessor — there is not one in the library.
  // Each rule carries its own message and <wr-form-field> shows it, so no
  // <wr-form-error> has to be written.
  protected readonly signup = form(this.model, path => {
    required(path.email, { message: 'Enter your work email.' });
    email(path.email, { message: 'That is not an email address.' });
  });

  protected reserve(): void {}
}