register.component.ts

function passwordsEqual(path: FieldPath<{
  password: string; confirmPassword: string 
}>) {
  validate(path, (ctx) => {
    const value = ctx.value();
    if (value.password !== value.confirmPassword) {
      return customError({ kind: 'notEqual', message: 'Passwords must match' });
    }
    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" />
    <label for="confirmPassword">Confirm Password:</label>
    <input id="confirmPassword" type="password" [control]="form.confirmPassword" />
    @for (error of form().errors(); track error.kind) {
      <span class="error">{{ error.message }}</span>
    }
    <button type="submit" [disabled]="form().invalid()">
      Login
    </button>
  </form>,
})
export class Register {
  private credentials = signal({
    email: '',
    password: '',
    confirmPassword: '',
  });
  protected readonly form = form(
    this.credentials,
    credentials => {
      passwordsEqual(credentials);
    }
  );
}