Угловой перевод мат-ввода в состояние ошибки после ответа HTTP-ошибки

Question

есть ли возможность установить mat-input в состояние ошибки после ответа http error?При отправке формы из приведенного ниже кода я отправляю http-запрос, и я хотел бы показать mat-error, но он отображается только тогда, когда ввод находится в состоянии ошибки, и я не знаю, как установить его «вручную» после ответа об ошибке

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()">
  <mat-form-field>
    <input matInput placeholder="placeholder" formControlName="Input" required>
    <mat-error *ngIf="variable">error message</mat-error>
  </mat-form-field>
</form>

Answer 1

serviceClass:

export class serviceClass{
    private url: string = 'your url'// your http request url

    constructor(private http: HttpClient) { }

    callApi() {
        return this.http.get(this.url);
    }
}

componentClass: при подписке http-запроса, если вы получаете ошибку в ответе, можно установить errorVariable true.

export class componentClass{
        private url: string = 'your url'
        public errorVariable:boolean;
        constructor(private service: serviceClass) { }

        getApi() {
            return this.service.callApi().subscribe(
              (response:string)=>{
                console.log(response);
             },
            (error)=>{
                console.error(error);
                this.errorVariable=true;
            }
            );
        }
    }

Шаблон HTML:

<mat-error *ngIf="errorVariable">error message</mat-error>