Form Validation error message not showing correctly in input-group

[eswstation]

Is there an existing issue for this?

• [X] 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.

` <form [formGroup]="filterForm">

    <div class="invalid" *ngIf="filterForm.get('filtersFilter').errors?.maxlength">
      Input exceeds max length
    </div>

`

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

[Sinan997]

Hi, ABP uses ngx-validate library for reactive forms validations.

For this situtation there is an directive named validationTarget.

You can simply solve your problem with the code below;

<form [formGroup]="filterForm">
  <div class="input-group" validationTarget>
    <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>