Validation rules

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' });

});

}

Interact with the preview — events will appear here.