Frontender Libs - обзор библиотек JS / CSS

Создание кастомных валидаторов с ValidatorFn

ValidatorFn — это функция, которая принимает AbstractControl (например, FormControl) и возвращает null, если данные валидны, или объект с ошибкой, если нет.

Пример кастомного валидатора, который проверяет, начинается ли значение с определенной буквы:

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function startsWithLetterValidator(letter: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const startsWithLetter = control.value?.startsWith(letter);
    return startsWithLetter ? null : { startsWithLetter: { value: control.value } };
  };
}

Применение валидатора:

import { FormBuilder, Validators } from '@angular/forms';
import { startsWithLetterValidator } from './validators/starts-with-letter.validator';

this.form = this.fb.group({
  name: ['', [Validators.required, startsWithLetterValidator('A')]]
});

Валидатор проверяет, что значение поля name начинается с буквы "A".

👉 @sWebDev

👍4

www.tgoop.com/sWebDev/3110

1.48K viewsSep 2, 2024 at 08:11

Создание кастомных валидаторов с ValidatorFn

ValidatorFn — это функция, которая принимает AbstractControl (например, FormControl) и возвращает null, если данные валидны, или объект с ошибкой, если нет.

Пример кастомного валидатора, который проверяет, начинается ли значение с определенной буквы:

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function startsWithLetterValidator(letter: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const startsWithLetter = control.value?.startsWith(letter);
    return startsWithLetter ? null : { startsWithLetter: { value: control.value } };
  };
}

Применение валидатора:

import { FormBuilder, Validators } from '@angular/forms';
import { startsWithLetterValidator } from './validators/starts-with-letter.validator';

this.form = this.fb.group({
  name: ['', [Validators.required, startsWithLetterValidator('A')]]
});

BY Frontender Libs - обзор библиотек JS / CSS