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