Skip to content

IgxTimePickerComponent, igxHint customization #8665

Closed
@luiscla27

Description

@luiscla27

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>

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions