Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
arion-p opened this issue Oct 4, 2024 · 0 comments

Comments

@arion-p
Copy link

arion-p commented Oct 4, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant