Angular 5 Reactive Forms Пользовательские и обязательные валидаторы: обязательный валидатор всегда возвращает значение True при использовании с нестандартным валидатором

Question

Я пытаюсь использовать специальный валидатор с требуемым валидатором в реактивных формах.Логика для пользовательского валидатора работает правильно и правильно отображает сообщение об ошибке.Однако при трассировке кода требуемый валидатор всегда возвращает true.В результате элемент управления формы недопустим и остается красным на внешнем интерфейсе, даже если в форме есть допустимые данные, введенные пользователем.

Я попытался удалить пользовательский валидатор из элемента управления формы, и требуемый валидатор работает нормально,Не уверен, почему при использовании с пользовательским валидатором требуемая ошибка всегда верна.

Component.ts

public AbsenceTypeName = new FormControl("", [Validators.required, 
     this.ValidateAbsenceTypeName.bind(this)]);

ValidateUserName(control: AbstractControl): any {

     const userName = control.value;

     const existingUserName = this.users.find(
       user =>
         user.userName.toUpperCase() ===
         userName.toUpperCase()) ? true : null;

     return { existingUserName: existingUserName };
}

Component.html

<mat-form-field>
     <input matInput placeholder="User Name [formControl]="UserName" 
          required maxlength="100" />
     <mat-error *ngIf="UserName.hasError('required')">User Name is required.
          </mat-error>
     <mat-error *ngIf="UserName.hasError('existingUserName')">User 
          Name already exists!</mat-error>
</mat-form-field>

Answer 1

пользовательский валидатор может возвращать 2 значения - если проверка не удалась: NULL если проверка не удалась: {object: "value"}

, поэтому измените свой код в соответствии с этим, что-то вроде этого:

ValidateUserName(control: AbstractControl): any {

     const userName = control.value;

     const existingUserName = this.users.find(
       user =>
         user.userName.toUpperCase() ===
         userName.toUpperCase()) ? true : null;

     return existingUserName? {existingUserName:"true"} : null;
}