как защитить неправильную позицию строки поля формы, когда API имеет ошибку 400 404 500 и т. д.

Question

Я использую mat form field в моем проекте угловой 7 .когда есть какая-то ошибка HTTP вроде 400,404 and 500.Подчеркивание mat form field отображается в неправильной позиции.

Снимок экрана с ошибкой: https://imge.to/i/vcguyC

Мой код

<form class="col-12 mt-2 formsearch" [formGroup]="searchdata"
      (ngSubmit)="onClickSubmit(searchdata.value)">

      <div class="row side_bar input-group mt-3">
        <div class="col">
          <mat-form-field>
            <mat-label>text text text</mat-label>
            <input formControlName="rec_number" type="text" matInput>
          </mat-form-field>
        </div>
    ...
    ...
  <button type="submit" class="btn btn-dark mat-elevation-z1">
   <i class="fas fa-search" aria-hidden="true"></i>
  </button>
</form>

и ts

  create_search() {
    this.searchdata = this.fb.group({
      rec_number: new FormControl(''),
    });
  }