Почему HTML не обновляется после выполнения HTTP-запроса get?

Question

У меня есть поле поиска, которое получает значение для поиска и заполняет массив.Если значение, предоставленное пользователем, недопустимо, логическое значение установлено на true, при этом отображается сообщение об ошибке, а цвет контура входа изменяется на красный.

У меня есть функция, которая получает указанное значение и заставляет HTTP получитьзапрос.Внутри функции .subscribe() я обновляю сообщение об ошибке и меняю цвет контура ввода на красный.

Я искал похожие проблемы и обнаружил, что в большинстве случаев люди не обновляли переменные внутри подписки, однакос моим кодом это не так.

MyComponent.component.ts

constructor(public rest: RestService) { }

private onCreateNewRequest(value: any) {
  let message = "Required!";
  if (value === undefined || value === "" || value.length < 0) {
    this.setErrorMessage(message);
    this.setIsFormInvalid(true);
    this.setNewRequestInputInvalid()
  } else {
    this.getOrderByNumber(this.setNewRequestInputInvalid, value);
  }
}

private getOrderByNumber(callback, value: string) {
  let message = "Invalid Order!";
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.onCreateReturn(orderNrData);
    } else {
      callback();
      this.setErrorMessage(message);
      this.setIsFormInvalid(true);
    }
  }, error => {
    callback();
    this.setErrorMessage(message);
    this.setIsFormInvalid(true);
  });
}

private setErrorMessage(message: string) {
  this.errorMessage = message;
}

private setIsFormInvalid(status: boolean) {
  this.isFormInvalid = status;
}

private setNewRequestInputInvalid() {
  document.getElementById('new-request-input-id').style['border-color'] = 'red';
}

MyComponent.component.html

<div class="row">
  <div class="col-2 d-flex align-items-center">Order: </div>
  <div class="col-8">
    <input class="form-control align-middle new-request-input-class" id="new-request-input-id" type="text" placeholder="Ex: EU030327" aria-label="Search" (input)="resetValidator()" (keyup.enter)="onCreateNewRequest(searchInput.value)" #searchInput>
  </div>
  <div class="col-2"></div>
</div>

<div class="row">
  <div class="col-2"></div>
  <div class="col-8 error-label-col" id="error-label-id" *ngIf="isFormInvalid">
    <small>{{getErrorMessage()}}</small>
  </div>
</div>

Rest.service.ts

private extractData(res: Response) {
  let body = res;
  return body || {};
}

getOrderByNumber(order_nr): Observable<any> {
  return this.http.get(endpoint + 'orders/number/' + order_nr, httpOptions).pipe(
            map(this.extractData));
} 

Мой код успешно меняет цвет контура ввода на красный, но почему-то не может изменить isFormInvalid на true.Из-за этого *ngIf не сработает и сообщение никогда не будет показано пользователю.

РЕДАКТИРОВАТЬ:

Если я использую ChangeDetectorRef после того, как яchange isFormInvalid все работает как положено ...

constructor(private ref: ChangeDetectorRef) { }

private getOrderByNumber(callback, value: string) {
  let message = "Invalid Order!";
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.onCreateReturn(orderNrData);
    } else {
      callback();
      this.setErrorMessage(message);
      this.setIsFormInvalid(true);
      this.ref.detectChanges(); // here
    }
  }, error => {
    callback();
    this.setErrorMessage(message);
    this.setIsFormInvalid(true);
    this.ref.detectChanges(); // here
  });
}

Почему Angular обнаруживает эти изменения, только если я заставляю их обнаруживать?Кроме того, это хорошая практика?