I am trying to use a custom validator with the required validator in reactive forms. The logic for the custom validator works correctly and displays its error message correctly. However, when tracing through the code, the required validator always returns true. As a result, the form control is invalid and remains red on the front end even though there is valid user input in the form.
I tried removing the custom validator from the form control, and the required validator behaves normally. Not sure why when used with the custom validator, the required error is always 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>