generated:catalog.entry.validation-rules.title
generated:catalog.entry.validation-rules.description
@xngui/components/validation-rules@xngui/components/validation-ruleschrome:demo.section
chrome:demo.preview
import { Component, signal } from '@angular/core';
import { form, FormField } from '@angular/forms/signals';
import { XForm, minLength } from '@xngui/components/form';
import { XFormField } from '@xngui/components/form-field';
import { XPasswordInput } from '@xngui/components/password-input';
import type { XValidationRuleDef } from '@xngui/components/validation-rules';
import { XValidationRules } from '@xngui/components/validation-rules';
const passwordRuleDefs: XValidationRuleDef[] = [
{ kind: 'minLength', label: 'At least 8 characters' },
{ label: 'One uppercase letter', test: (v) => typeof v === 'string' && [A-Z].test(v) },
{ label: 'One number', test: (v) => typeof v === 'string' && \d.test(v) },
];
@Component({
selector: 'app-example',
imports: [FormField, XForm, XFormField, XPasswordInput, XValidationRules],
templateUrl: './validation-rules.component.html',
})
export class ExampleComponent {
protected readonly passwordRulesId = 'password-rules';
private readonly model = signal({ password: '' });
protected readonly demoForm = form(this.model, (path) => {
minLength(path.password, 8, { message: 'At least 8 characters' });
});
}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-validation-rules
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
fieldFieldTree<unknown>—Signal Forms field — same `FieldTree` path as `[formField]` on the bound control.
rulesreadonly XValidationRuleDef[][]Rule definitions — `kind` matches validator errors; `test` for custom checks.
titlestring''Optional heading above the list.
ariaLabelstring''Accessible name for the list when `title` is empty.
listIdstring—Stable id for `aria-describedby` on the related control.
validateOnXValidateOn—Overrides parent `x-form` / `x-form-field` validation timing.
sizeXSize—Visual size tier — falls back to parent `x-form` then XConfigService when unset.
densityXDensity—Spacing offsets — orthogonal to `size`; falls back to parent `x-form` then XConfigService when unset.