Angular проблема, чтобы установить вход в пустое значение

Question

У меня есть форма с панелью поиска, и я хотел бы установить значение бара пустым после нажатия кнопки Отмена или Сохранить:

Это входные данные в моем шаблоне:

 <div class="input-group"><input type="text" class="form-control" name="searchTxt"  id="filtrer" [value]="searchEmpty" (input) = "onSearchTrigger(searchTxt.value)" placeholder="Rechercher un organisme financeur" #searchTxt>

И две кнопки отменяются и сохраняются в моем шаблоне:

  <div class="modal-footer"><button type="button" class="btn btn-default"
            data-dismiss="modal" (click) ="onModalCancel()">Annuler</button>
          <button type="submit" class="btn btn-primary" (click)="onSubmit()" data-dismiss="modal"
            [disabled]="!registrationForm.valid"> Valider</button></div>
      </div>

В моем компоненте у меня есть две функции:

  onSubmit() {
this.isSubmitted = true;
if (!this.registrationForm.valid) {
  return false;
  // tslint:disable-next-line: no-else-after-return
} else {
  this.myCodeOrganisme = this.registrationForm.value.orga;
  this.serviceHttp2.getAllOrganismes().subscribe(resp => (this.organismesFinanceurs = resp));
  for (const organisme of this.organismesFinanceurs) {
    if (organisme.code === this.myCodeOrganisme) {
      this.myLibelleOrganisme = organisme.libelleLong;
    }
  }
  this.isSubmitted = false;
  this.searchEmpty = '';
}
  }

  onModalCancel() {
this.searchEmpty = null;
  }

И консоль возвращает мне эту ошибку :

ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после того, как оно было проверено.

Итак, как я могу установить строку поиска ввода пустым ??

Спасибо

Answer 1

вы устанавливаете свойства компонента, не входящие в подписку ответа сервера. Вы просматриваете this.organismesFinanceurs и устанавливаете новые свойства, после чего ответ сервера обновляется this.organismesFinanceurs. Попробуйте перенести эту функцию в подписку Http-запроса (см. Ниже):

onSubmit() {
  this.isSubmitted = true;
  if (!this.registrationForm.valid) {
    return false;
    // tslint:disable-next-line: no-else-after-return
  } else {
    this.myCodeOrganisme = this.registrationForm.value.orga;
    this.serviceHttp2.getAllOrganismes().subscribe(resp => {
      this.organismesFinanceurs = resp;

      for (const organisme of this.organismesFinanceurs) {
        if (organisme.code === this.myCodeOrganisme) {
          this.myLibelleOrganisme = organisme.libelleLong;
        }
      }
      this.isSubmitted = false;
      this.searchEmpty = '';
    });
  }
}