Form Field

import { Component } from '@angular/core';
import { WrButton } from 'ngwr/button';
import { WrFormError, WrFormField } from 'ngwr/form';
import { WrInput } from 'ngwr/input';

@Component({ imports: [WrButton, WrFormError, WrFormField, WrInput] })
export class MyComponent {}

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

@Component({
  imports: [FormField, WrFormField, WrInput],
  template: `
    <wr-form-field label="Work email" required>
      <input wrInput type="email" [formField]="signup.email" />
    </wr-form-field>
  `,
})
export class Signup {
  private readonly model = signal({ email: '' });

  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.' });
  });
}

provideWrI18nStaticLoader({
  en: {
    validation: {
      required: 'This field is required.',
      // Filled from the error payload: { requiredLength, actualLength }.
      minlength: 'Minimum length is {{requiredLength}}.',
      min: 'Enter {{min}} or more.',
    },
  },
  ru: {
    validation: {
      required: 'Обязательное поле.',
      minlength: 'Не короче {{requiredLength}} символов.',
      min: 'Не меньше {{min}}.',
    },
  },
}),

<wr-form-field label="Handle" required>
  <input wrInput formControlName="handle" />
  <!-- Only for required; minlength still resolves. -->
  <wr-form-error key="required">Pick a handle.</wr-form-error>
</wr-form-field>

<!-- Validators.required on the control, required on the field. -->
<wr-form-field label="Email" required>
  <input wrInput formControlName="email" type="email" />
</wr-form-field>

<!-- Or read it off the control; requiredValidator is Validators.required. -->
<wr-form-field label="Email" [required]="form.controls.email.hasValidator(requiredValidator)">
  <input wrInput formControlName="email" type="email" />
</wr-form-field>