Help with Angular Reactive Form validation message position when using Boostrap "input-group" class for input with button #4298

jeflux created 2 years ago

ABP Framework version: v5.3.4
UI type: Angular

I have a Reactive form with required fields that looks like this:

The form is defined in the component as:

this.participantForm = this.fb.group({
      participantBirthDate: [null, [Validators.required]],
      participantFirstName: [ null, [Validators.required]],
      participantLastName: [null, [Validators.required]],
      participantEmail: [ null, [Validators.email, Validators.required]],
      });

And I'm trying to use a standard Bootstrap input box with a button as shown here: Boostrap Input Group Doc

Each of the form items looks like this:

<div class="input-with-icon">
  <label for="participantFirstName">First name</label>
  <div class="required-chip-badge">Required</div>
  <div class="input-group">
    <input
      type="text"
      class="form-control"
      placeholder="Enter first name"
      formControlName="participantFirstName"
      #pfn
    />
    <button
      class="btn btn-outline-secondary icon icon-pencil"
      (click)="pfn.focus()"
      type="button"
    ></button>
  </div>
</div>

When a validation error is present, this happens:

The<abp-validation-error> is being inserted immediately after the <input>, but I had to wrap the input and button in the div with the "input-group" class to create the button as part of the input element, so the validation error is inserted between:

If I use an input box without the input-group, the validation works as desired with the message being below the input element:

QUESTION Our design standards will use buttons on all input boxes, so I need to find a way to have have the validation error display below the input with button element. This is effectively inserting the validation error element after the input-group <div>.

Is this possible without a bunch of manual work?

I know I can build out more manual validation layouts in the template (as described here: Angular Reactive Forms Doc, but this would be a lot more work and we would have to do it wherever we have forms.

I've read through the ABP Form Validation Doc, but it does not cover this particular scenario.

2 Answer(s)