matchFields

import { Component } from '@angular/core';
import { WrInput } from 'ngwr/input';
import { WrValidators } from 'ngwr/validators';

@Component({ imports: [WrInput] })
export class MyComponent {}

form.errors: {
  "matchFields": {
    "fields": [
      "password",
      "confirm"
    ]
  }
}

form.valid: false

confirm.errors: {
  "match": {
    "target": "password"
  }
}

import { FormControl, FormGroup } from '@angular/forms';
import { WrValidators } from 'ngwr/validators';

const form = new FormGroup(
  {
    password: new FormControl(''),
    confirm:  new FormControl(''),
  },
  { validators: [WrValidators.matchFields('password', 'confirm')] },
);

const form = new FormGroup(
  {
    password: new FormControl(''),
    confirm:  new FormControl('', [WrValidators.match('password')]), // field message
  },
  { validators: [WrValidators.matchFields('password', 'confirm')] },
);

WrValidators.matchFields('billing.zip', 'shipping.zip');
WrValidators.matchFields('a', 'b', 'c');

Name	Description	Type	Default
`signature`	Call it with two or more control names. Add it to the group that owns them.	`(first: string, second: string, ...rest: readonly string[]) => ValidatorFn`	`—`
`lookup`	`get()` paths: `billing.zip`, `items.0`. Name a leaf control. A missing name or a group turns the check off and warns in dev.	`—`	`—`
`error key`	On mismatch: `{ matchFields: { fields: [...] } }` on the group. `fields` lists the compared names, never values.	`{ matchFields: { fields } }`	`—`
`empty values`	`null`, `undefined` and `""` are equal. All empty passes; filled against empty fails.	`—`	`—`
`comparison`	Strict `===`: two `Date` objects for the same instant differ. Compare a primitive.	`—`	`—`
`disabled controls`	Skipped. Fewer than two enabled names passes.	`—`	`—`

Installation

Live demo

Usage

Pair it with match

Paths and arity

API

See also