ngx-validate
ngx-validate copied to clipboard
Validating two input elements inside a single input-group does not show validation message unless both inputs are invalid
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:
- 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>
- Type an invalid value in one of the inputs, leave the other blank. No error message is displayed
- 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.