Form Validation error message not showing correctly in input-group

[eswstation]

Is there an existing issue for this?

• I have searched the existing issues

Description

When using Input-Group inside a form, the error message comes between the input and the button, if the button is set at the end of the input group

Reproduction Steps

<form [formGroup]="filterForm">
        <div class="input-group">
          <input type="search" class="form-control" placeholder="Search Here" id="filterText" (keyup.enter)="onFilterChange()" formControlName="filtersFilter"/>
          <button type="submit" class="btn btn-primary" (click)="onFilterChange()" title="Search">
            <i class="fa fa-search"></i>
          </button>
        </div>
        </form>

Expected behavior

The validation message should not break the layout of input-group and should come below it

Actual behavior

The validation message shows between the input and button of an input-group and breaks the layout

Regression?

No response

Known Workarounds

using skipValidations on the specific input and manually adding validation message.

`

Input exceeds max length

`

Version

8.2.0

User Interface

Angular

Database Provider

EF Core (Default)

Tiered or separate authentication server

None (Default)

Operation System

Windows (Default)

Other information

No response