ngx-validate icon indicating copy to clipboard operation
ngx-validate copied to clipboard

Validating two input elements inside a single input-group does not show validation message unless both inputs are invalid

Open arion-p opened this issue 1 year ago • 0 comments

Describe the bug Having two inputs inside an input-group (as in a date range picker) does not show the validation errors unless both inputs are invalid.

To Reproduce Steps to reproduce the behavior:

  1. Create a form with two inputs inside a single input-group:
    <form [formGroup]="form" (ngSubmit)="submit()">
      <div class="form-group" validationStyle>
        <label for="daterange" class="form-label">Date range</label>
        <div class="input-group" validationTarget>
          <div id="daterange" class="form-control">
            <input
              formControlName="dateFrom"
              type="text"
              id="dateFrom"
              placeholder="from"
              class="form-control-part"
              pattern="\d+/\d+/\d+"
            />
            <span>-</span>
            <input
              formControlName="dateTo"
              type="text"
              id="dateTo"
              placeholder="to"
              class="form-control-part"
              pattern="\d+/\d+/\d+"
            />
          </div>
        </div>
      </div>

      <button class="btn btn-primary">Submit</button>
    </form>
  1. Type an invalid value in one of the inputs, leave the other blank. No error message is displayed
  2. Type an invalid value in both inputs. Both error messages are displayed

Expected behavior Typing an invalid value in only one of the inputs should show the validation error

Additional context See sample project in stackblitz: https://stackblitz.com/edit/ngx-validate-5fvw3m?file=src%2Fapp%2Fcomponents%2Fapp.component.html

The issue is a result of the way the is-invalid css class is applied to the containing element (or the one marked with the validationStyle directive)

A possible solution would be to have validated controls, register themselves with the marked element and the marked element manage its css class. However that won't work when validationStyle directive is not used.

arion-p avatar Oct 04 '24 12:10 arion-p