angular - Angularでフォームエラーの検証を1つずつ表示するにはどうすればよいですか

Question

私はAngularが初めてで、カスタムEmailDomainErrorバリデータークラスを1つ作成し、正常に動作しています。

しかし、問題は、電子メールドメインエラーが電子メール検証エラーメッセージとともに表示されていることです。この問題を解決するにはどうすればよいですか。本当に混乱しています。誰か助けてください。

EmailDomainError クラスで電子メール パターンが正しいかどうかを確認する必要があると思います。どうすれば確認できますか?正しい方法と完全なコードだと思う場合--- https://stackblitz.com/edit/angular-bvihqj

ngOnInit

 ngOnInit() {

    this.employeeForm = this.fb.group({
      fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(10)]],
      contactPreference: ['email'],
      email: ['', [Validators.required, Validators.email, emailDomainError]],
      phone: [''],
      skills: this.fb.group({
        skillName: ['', [Validators.required]],
        experienceInYears: ['', [Validators.required]],
        proficiency: ['', [Validators.required]]
      })
    });

このオブジェクトには、このフォームのすべての検証メッセージが含まれています

 formErrors = {
    'fullName': '',
    'email': '',
    'phone': '',
    'skillName': '',
    'experienceInYears': '',
    'proficiency': ''
  };


     validationMessages = {
        'fullName': {
          'required': 'Full Name is required.',
          'minlength': 'Full Name must be greater than 2 characters.',
          'maxlength': 'Full Name must be less than 10 characters.'
        },
        'email': {
          'required': 'Email is required.',
          'email': 'Valid Email id is required.',
          'emailDomainError': 'Email domain should be karvy.com'
        },
        'phone': {
          'required': 'Phone number is required.'
        },
        'skillName': {
          'required': 'Skill Name is required.',
        },
        'experienceInYears': {
          'required': 'Experience is required.',
        },
        'proficiency': {
          'required': 'Proficiency is required.',
        },
      };

emailDomainError

function emailDomainError(control: AbstractControl): { [key: string]: any } | null {
  const email: string = control.value;
  const domain: string = email.substring(email.lastIndexOf("@") + 1);
  if (email === '' || domain === "karvy.com") {
    return null;
  } else {
    return { "emailDomainError": true };
  }
}