import { Component } from '@angular/core';
import { WrInput } from 'ngwr/input';
import { WrValidators } from 'ngwr/validators';
@Component({ imports: [WrInput] })
export class MyComponent {}match
Check that a control equals a sibling, such as a password confirmation.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Live demo
Usage
import { FormControl, FormGroup } from '@angular/forms';
import { WrValidators } from 'ngwr/validators';
const form = new FormGroup({
password: new FormControl(''),
confirm: new FormControl('', [WrValidators.match('password')]),
});Initial mismatch
Code that reads form.valid before the template binds misses it; add matchFields to the group.
API
| Name | Description | Type | Default |
|---|---|---|---|
signature | Call it with the sibling control name. | (name: string) => ValidatorFn | — |
lookup | Reads control.parent.get(name). Passes when the parent or the sibling is missing. | — | — |
error key | On mismatch: { match: { target: 'password' } }. A filled value against an empty one fails. | { match: { target } } | — |
initial values | Not reported until the control revalidates. Add matchFields to the group. | — | — |