Angular Реактивная форма показывает ошибки после перезагрузки / отправки

Question

У меня есть форма Angular в моем компоненте, которая позволяет пользователю добавлять электронную почту в список. Это довольно просто, и после отправки представления перезагружает список подписчиков электронной почты с помощью вызова API, а затем пользователь может добавить еще один адрес электронной почты ... это мой HTML в моем шаблоне

<form [formGroup]="addEmailToListForm" (ngSubmit)="addEmailToList()"  autofill="off" novalidate>
    <div class="email-subscriber-list__control">
      <div class="email-subscriber-list__control__input">
        <mat-form-field>
          <input formControlName="email" matInput
                 placeholder="Subscriber"
                 autocomplete="off">
        </mat-form-field>
      <div>
        <button mat-raised-button color="primary" type="submit" [disabled]="!addEmailToListForm.valid">
          Add
        </button>
      </div>
    </div>
  </form>

Теперь в мой файл кода компонента У меня есть следующие методы для создания формы и отправки формы, создание запускается только тогда, когда ngOnInit()

createAddEmailToListForm(): FormGroup {
    return new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email],
        this.subscriberEmailUniqueValidator.validate.bind(this)
      )
    });
  }

  addEmailToList(): void {
    const data = {
      type: this.subscriptionType,
      subscriber: this.addEmailToListForm.controls['email'].value,
      tags: {
        company: this.selectedCompany
      }
    };

    const companyId = this.selectedCompany ? this.selectedCompany.id : null;

    this.apiService.createEmailSubscription(data, companyId).subscribe((resp: any) => {
        if (resp.message === 'Successfully created') {
         // reset the list and form item
          this.apiService
            .getEmailSubscriptions(this.subscriptionType, companyId).subscribe((emails) => {
            this.subscriptionList = emails;
          });
          this.addEmailToListForm.reset();
          this.addEmailToListForm.setErrors(null);
        }
      },
      (err) => {
        // do something...
      });
  }

Все это прекрасно, но я заметил, что когда страница загружает <mat-form-field> не показывает состояние ошибки, и это здорово. После отправки формы <mat-form-field> показывает состояние ошибки (цвет текста и нижняя граница красные), хотя я сбросил форму с помощью reset() и .setErrors(null);. Я попытался установить для ошибок элемента управления формы значение null, но это удаляет валидаторы (чтобы можно было отправить пустое значение), или если я попытаюсь markAsPristine или markAsUntouched. Любые идеи, как я могу решить эту проблему. Ниже приведены некоторые иллюстрации, которые помогут мне в моем вопросе

Перед отправкой После отправки