Angular свойства компонента не обновляются внутри подписки HTTPRequest

Question

Я хотел бы показать / скрыть сообщения во всплывающем окне, используя <div *ngIf="hasFormErrors">{{messageBody}}</div>. Я определил два publi c свойства hasFormErrors = false; и messageBody = ''; в начале компонента. Проблема, которую я имею, состоит в том, что эти свойства не обновляются, когда запрос возвращается с HTTPErrorResponse, и поэтому сообщение об ошибке не появляется во всплывающем окне. Внутри обработчика errorMsg он показывает, что оба свойства не определены. Я не уверен, что я делаю неправильно.

createObject(requestBody: NewObjectRequestBody) {
    const apiUrl = <some-url>;
    const body = requestBody;
    const httpHeaders = this.httpUtils.getHTTPHeaders();
    return this.http.post<NewObjectRequestBody>(apiUrl, body, { headers: httpHeaders });
}

onSubmit() {
    this.hasFormErrors = false;
    const controls = this.objectCreateForm.controls;
    /** check form */
    if (this.objectCreateForm.invalid) {
        Object.keys(controls).forEach(controlName => 
           controls[controlName].markAsTouched()
        );
        this.messageBody = 'Required fields need to be filled out.';
        this.hasFormErrors = true;
        return;
    }

    const newObjectParams = this.prepareObject();
    this.sampleService.createObject(newObjectParams).subscribe(
        responseData => {
            console.log(responseData);
        },
        errorMsg => {
            this.messageBody = errorMsg;
            this.hasFormErrors = true;
        }
    )
}

Answer 1

Решение № 1:

Мне пришлось удалить changeDetection: ChangeDetectionStrategy.OnPush из @Component.

Решение № 2:

Мне удалось найти решение для моего вопрос. Вот как я это решил:

Сначала добавили id #objectName к одному из элементов управления формы.

<input #objectName matInput placeholder="Object Name" formControlName="name" />

Затем в компонент добавили @ViewChild для элемента ввода .

@ViewChild('objectName', {static: false}) objectName: ElementRef;

Затем обновил блок errorMsg:

errorMsg => {
    this.messageBody = this.formatHTTPResponse(errorMsg).message;
    this.hasFormErrors = true;
    this.clickObjectName();
}

и, наконец, добавил функцию clickObjectName():

clickObjectName() {
    this.batchObject.nativeElement.click();
}