Когда вы используете кастомную валидацию (NG_VALIDATOR) в Angular и сталкиваетесь с ситуацией, когда вы хотите вернуть первое значение этой валидации при использовании директивы ngIf, вам нужно принять во внимание несколько важных моментов.
- Первым шагом является создание собственного валидатора с помощью класса, который реализует интерфейс Validator. Например:
import { FormControl, ValidatorFn } from "@angular/forms";
export function customValidator(): ValidatorFn {
return (control: FormControl) => {
const value = control.value;
// Ваша логика валидации
if (/* валидация не прошла */) {
return {
customValidation: "Первое значение не прошло валидацию"
};
}
return null;
};
}
- Далее вы можете использовать этот валидатор в вашем шаблоне и задать ему ngIf. Например:
<input [formControl]="myControl">
<div *ngIf="myControl.errors?.customValidation">
{{ myControl.errors.customValidation }}
</div>
- Однако при использовании ngIf, Angular будет устанавливать ошибки валидации только после первой проверки ввода (touched) или после попытки отправить форму (submitted). Это значит, что если пользователь не взаимодействовал с полем ввода или не попытался отправить форму, то информация об ошибке кастомной валидации не будет отображаться.
- Если вам необходимо отобразить ошибку кастомной валидации немедленно, вы можете добавить ручной вызов метода
updateValueAndValidityпосле ввода значения в поле ввода, используя событие input:
<input [formControl]="myControl" (input)="myControl.updateValueAndValidity()">
<div *ngIf="myControl.errors?.customValidation">
{{ myControl.errors.customValidation }}
</div>
Таким образом, при каждом вводе пользователем символа в поле ввода будет происходить проверка на наличие ошибки кастомной валидации и, если ошибка обнаружена, она будет отображаться сразу же.
Также стоит отметить, что вы можете изменить логику этой валидации в соответствии с вашими требованиями, чтобы проверять не только первое значение поля ввода, но и любые другие условия, необходимые для прохождения валидации.