login-page.component.ts

function password(path: FieldPath<string>) {
  validate(path, (ctx) => {
    const value = ctx.value();
    if (value && value.length < 8) {
      // you can return different errors for different cases using the "kind" field
      return customError({
        kind: 'tooShort', message: 'Password must be at least 8 characters long',
      });
    }
    if (value && !/[A-Z]/.test(value)) {
      return customError({
        kind: 'noUpperCase', 
        message: 'Password must contain at least one uppercase letter'
      });
    }
    return null;
  });
}

@Component({
  template: 
    <form>
      <label for="email">Email:</label>
      <input id="email" type="email" [control]="form.email" />
      <label for="password">Password:</label>
      <input id="password" type="password" [control]="form.password" />

      @if (form.password().invalid()) {
        <span class="password-errors">
        <!-- iterate over errors and elegantly use "kind" to track -->
          @for (error of form.password().errors(); track error.kind) {
            {{ error.message }}
          }
        </span>
      }
      <button type="submit" [disabled]="form().invalid()">
        Login
      </button>
    </form>,
})
export class LoginPage {
  private credentials = signal({
    email: '',
    password: '',
  });
  protected readonly form = form(
    this.credentials,
    credentials => {
      required(credentials.email);
      email(credentials.email);
      required(credentials.password);
      password(credentials.password);
    }
  );
}