Can't use validators required as i want

Question

I have a little problem with my sign up form using angular. In my form i check if the mail already exists in my DB and it works i use checkMail for that, i also use Validators.required to make sure that the submit button is clickable only if all the fields aren't empty. When i don't use checkMail the submit button works as I want but when I use checkMail if the mail doesn't exist in the DB the submit button become active even if the other fields are empty. Can you please help me ?

Thanks a lot !

inscription.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {
  FormGroup,
  FormControl,
  Validators,
  AbstractControl,
  AsyncValidatorFn,
  ValidationErrors,
} from '@angular/forms';
import { Observable, map } from 'rxjs';
import { UtilisateurService } from 'src/app/services/utilisateur.service';
import { InscriptionService } from 'src/app/services/inscription.service';
import { CustomValidator } from 'src/app/validation/custom-validator';

@Component({
  selector: 'app-inscription',
  templateUrl: './inscription.component.html',
  styleUrls: ['./inscription.component.css'],
})
export class InscriptionComponent implements OnInit {
  monForm: FormGroup;

  constructor(
    private utilisateurService: UtilisateurService,
    private inscriptionService: InscriptionService,
    private router: Router
  ) {
    this.monForm = new FormGroup({
      mail: new FormControl(
        '',
        [Validators.required, Validators.email],
        this.checkMail()
      ),
      prenom: new FormControl('', [Validators.required]),
      nom: new FormControl('', [Validators.required]),

      confirmPasswordGroup: new FormGroup(
        {
          password: new FormControl('', Validators.required),
          confirmPassword: new FormControl('', Validators.required),
        },
        CustomValidator.equals
      ),
    });
  }

  ngOnInit(): void {}

  submit() {
    let utilisateur = {
      mail: this.monForm.get('mail')?.value,
      prenom: this.monForm.get('prenom')?.value,
      nom: this.monForm.get('nom')?.value,
      password: this.monForm.get('confirmPasswordGroup.password')?.value,
      id: undefined,
      adresse: undefined,
      type: undefined,
      historiqueCommande: undefined,
      employe: undefined,
    };

    this.utilisateurService.create(utilisateur).subscribe((data) => {
      this.router.navigate(['/acceuil']);
    });
  }

  checkMail(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      return this.inscriptionService.checkMail(control.value).pipe(
        map((bool) => {
          return bool ? { mailExist: true } : null;
        })
      );
    };
  }
}

inscription.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {
  AsyncValidatorFn,
  AbstractControl,
  ValidationErrors,
} from '@angular/forms';
import { Observable, map } from 'rxjs';
import { Utilisateur } from '../model/utilisateur';

@Injectable({
  providedIn: 'root',
})
export class InscriptionService {
  [x: string]: any;
  url = 'http://localhost:8080/pizzayolo/api/utilisateur';

  constructor(private http: HttpClient) {}

  public inscription(utilisateur: any): Observable<Utilisateur> {
    return this.http.post<Utilisateur>(this.url + '/inscription', utilisateur);
  }

  public checkMail(mail: string): Observable<boolean> {
    return this.http.get<boolean>(this.url + '/mail/' + mail);
  }
}

inscription.component.html

<div class="container">
  <form (ngSubmit)="submit()" [formGroup]="monForm">
    <div>mail:<input formControlName="mail" /></div>

    <div
      *ngIf="monForm.get('mail')?.dirty && monForm.get('mail')?.invalid"
      class="alert alert-danger"
    >
      <ng-container *ngIf="monForm.get('mail')?.hasError('required')">
        champ obligatoire
      </ng-container>
      <ng-container *ngIf="monForm.get('mail')?.hasError('mailExist')">
        ce Mail est deja utilisé
      </ng-container>
      <ng-container *ngIf="monForm.get('mail')?.hasError('email')">
        champ obligatoire de type mail avec un @ !
      </ng-container>
    </div>

    <div>
      prenom:<input formControlName="prenom" /><ng-container
        *ngIf="monForm.get('prenom')?.hasError('required')"
      >
        champ obligatoire
      </ng-container>
    </div>
    <div>
      nom:<input formControlName="nom" /><ng-container
        *ngIf="monForm.get('nom')?.hasError('required')"
      >
        champ obligatoire
      </ng-container>
    </div>

    <ng-container formGroupName="confirmPasswordGroup">
      <div>
        mot de passe:<input formControlName="password" /><ng-container
          *ngIf="monForm.get('password')?.hasError('required')"
        >
          champ obligatoire
        </ng-container>
      </div>
      <div>confirm password:<input formControlName="confirmPassword" /></div>
      <span *ngIf="monForm.get('confirmPasswordGroup')?.hasError('equals')">
        mdp different</span
      >
    </ng-container>

    <div>
      <button type="submit" [disabled]="monForm.invalid">valider</button>
    </div>
  </form>
</div>