import 'zone.js/dist/zone'; import { Component, Directive, effect, forwardRef, Input, OnChanges, signal, } from '@angular/core'; import { CommonModule } from '@angular/common'; import { bootstrapApplication } from '@angular/platform-browser'; import { AbstractControl, FormsModule, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn, Validators, } from '@angular/forms'; // Utility directive for template-driven form validation // Same mental model to `new FormControl({ validators: [...] })`. @Directive({ selector: '[ngModel][validators]', standalone: true, providers: [ { provide: NG_VALIDATORS, multi: true, useExisting: forwardRef(() => WithValidators), }, ], }) export class WithValidators implements Validator, OnChanges { #onValidatorChange: Function = () => {}; @Input({ required: true }) validators: ValidatorFn[] = []; ngOnChanges() { this.#onValidatorChange(); } validate(control: AbstractControl): ValidationErrors | null { return Validators.compose(this.validators)?.(control) ?? null; } registerOnValidatorChange?(callback: () => void): void { this.#onValidatorChange = callback; } } // custom validator function const okValidator: ValidatorFn = (control) => { const value = control.getRawValue(); if (typeof value === 'string' && value.includes('ok')) { return null; } return { ok: "value must contain 'ok'.", }; }; @Component({ selector: 'my-app', standalone: true, imports: [CommonModule, FormsModule, WithValidators], template: `

Validation by functions on template-driven forms

`, }) export class App { readonly message = signal('Hello'); readonly messageValidators = [Validators.required, okValidator]; constructor() { effect(() => { console.log(`message changed`, this.message()); }); } onSubmit(value: { message: string }) { console.log(value.message); } } bootstrapApplication(App);