Confirm a password

Use equalTo() with a reactive source pointing to the password field. Keeping the model and bindings in one component makes the complete interaction visible:

import { Component } from '@angular/core';
import { equalTo, field, form, FormNodeDirective } from '@ngblocks/form-nodes';

@Component({
  selector: 'app-password-editor',
  imports: [FormNodeDirective],
  template: `
    <input type="password" [formNode]="form.password" />
    <input type="password" [formNode]="form.confirmation" />

    @if (form.confirmation.touched()) {
      @if (form.confirmation.getError('equalTo'); as error) {
        <p class="error">{{ error.message }}</p>
      }
    }
  `,
})
export class PasswordEditor {
  password = field('');

  form = form({
    password: this.password,
    confirmation: field('', [
      equalTo(() => this.password(), { message: 'Passwords must match.' }),
    ]),
  });
}

The separate password reference avoids circular TypeScript inference while still becoming the exact child stored at form.password.

equalTo() uses Object.is() and tracks the expected-value source. Changing the password therefore revalidates confirmation automatically. Its error omits both compared values so passwords do not leak into error summaries, logs, or translation callbacks.

Add required to both fields when empty matching passwords must not be accepted.

See Built-in validators: equalTo.