Validation With Services angular

form.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '@core/services/auth/auth.service';

@Component({
	selector: 'app-page-config',
	templateUrl: './page-config.component.html',
	styleUrls: ['./page-config.component.scss']
})
export class PageConfigComponent implements OnInit {

	titleAccount = 'Cuenta'
	titlePassword = 'Cambiar Contraseña'


	errorMessage: string = '';
	successMessage: string = '';

	accountForm: FormGroup;
	validation_messages = {
		email: [
			{ type: "required", message: "El email es requerido" },
			{ type: "pattern", message: "Ingresa un email valido" }
		],
		password: [
			{ type: "required", message: "El password actual es requerido" },
			{ type: "minlength", message: "El password actual debe tener minimo 5 caracteres" }
		],
		newpassword: [
			{ type: "required", message: "El nuevo password es requerido" },
			{ type: "minlength", message: "El nuevo password debe tener minimo 5 caracteres" }
		],
		username: [
			{ type: "required", message: "El username es requerido" },
			{ type: "minlength", message: "El username debe tener minimo 5 caracteres" },
			{ type: "pattern", message: "El username solo acepta caracteres alfanumericos" },
			{ type: "the_username_exist", message: "Ese nombre de usuario ya existe" }
		]
	}

	passwordForm: FormGroup;

	loggedIn

	exist_username;

	exist_usernames = [];

	constructor(
		private authService: AuthService,
		private formBuilder: FormBuilder,
		private router: Router,
	) {

		//Show or hiden if have login
		this.loggedIn = this.authService.loggedIn;
		//console.log('loggedIn page' ,this.loggedIn);

		//Forms
		this.accountForm = this.formBuilder.group({
			email: new FormControl(
				"",	// <- valor por defecto
				Validators.compose([
					Validators.required,
					Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")
				])
			),
			password: new FormControl(
				"",	// <- valor por defecto
				Validators.compose([
					Validators.required,
					Validators.minLength(5)
				])
			),
			username: new FormControl(
				"",	// <- valor por defecto
				Validators.compose([
					Validators.pattern("^$|^[A-Za-z0-9]+"),
					Validators.required,
					Validators.minLength(3),
					this.categoryValidator
			 ])
			)

		})

		this.passwordForm = this.formBuilder.group({
			password: new FormControl(
				"",	// <- valor por defecto
				Validators.compose([
					Validators.required,
					Validators.minLength(5)
				])
			),
			newpassword: new FormControl(
				"",	// <- valor por defecto
				Validators.compose([
					Validators.required,
					Validators.minLength(5)
				])
			)
		})

		
	}//constructor

	ngOnInit() {
		//console.log(this.headerMenu);
	}

	public categoryValidator = (control: AbstractControl) => {
		console.log('control ', control );
		console.log('array', this.exist_usernames);
				
		//return null
		
		if ( control.dirty && !control.errors ) {
			this.getExistUsername(control.value);
			console.log('control.value ', control.value);

			if ( this.exist_usernames.includes(control.value) ){
				console.log('existe');
				
				return { 'the_username_exist' : { value: control.value } };
			}
			else{
				return null
			}
		}
		
  };

	getExistUsername(username) {
		this.authService.existUsername(username).subscribe(
			users => {

				if (users !== 'undefined' || users.length > 0) {
					this.exist_usernames.push(users[0].username);
				}

			}
		)
	}//getExistUsername


}