Closed
Description
Is your feature request related to a problem?
I want to customize an <igx-hint>
of <igx-time-picker>
so I can add custom validation messages, currently it seems the only way to do that is to use an igxTimePickerTemplate
.
The problem is that igxTimePickerTemplate
overrides some of your predefined behaviours defined by InteractionMode
(for my use case I want to keep the numbers validation and the scrolldown wheel for dropdown mode)
Describe the solution you'd like
Expose the directive igxHint
so the hint can be passed directly (like igxLabel
already is)
<igx-time-picker format="hh:mm tt" name="end" [mode]="'dropdown'">
<label igxLabel>End time</label>
<igx-hint ig class="text-danger" *ngIf="form.controls.end.touched && form.controls.end.hasError('ShouldBeGreater')">
End time should be greater than start time
</igx-hint>
</igx-time-picker>
Describe alternatives you've considered
Currently as workaround I'm doing this:
<div [class.igx-input-group--invalid]="form.controls.end.touched && form.controls.end.hasError('ShouldBeGreater')">
<igx-time-picker format="hh:mm tt" name="end" [mode]="'dropdown'">
<label igxLabel>End time</label>>
</igx-time-picker>
<div class="igx-input-group__hint" *ngIf="form.controls.end.touched && form.controls.end.hasError('ShouldBeGreater')">
<igx-hint class="error-hint">
End time should be greater than start time
</igx-hint>
</div>
</div>