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

Templated datepicker has inconsistent behavior compared to input group #3624

Closed
ninaarens opened this Issue Jan 15, 2019 · 6 comments

Comments

Projects
None yet
4 participants
@ninaarens
Copy link

ninaarens commented Jan 15, 2019

Description

Input field with type text within a datepicker template does not behave consistently with how an input field with type text does inside an input group.

  • igniteui-angular version: 7.1.1
  • browser: Chrome

Steps to reproduce

  1. Fill in name
  2. Pick a date greater than today
  3. Pick a date smaller than today
  4. Edit the code so the appMinDate directive is on the igx-date-picker instead of the input field

Result

  1. Filling in just the name marks the form as valid, enabling the submit button
  2. Date field is not marked as valid
  3. Date field is marked as valid
  4. appMinDirective works and marks form as invalid when picked date is smaller than today

Expected result

  1. Submit button should only enable after both name and date have valid values in them
  2. Date field should show valid
  3. Date field should not be valid because the directive appMinDate says the minimum date should be Date.Now()
  4. Technically correct but would expect it to need to be and work on the input field

Attachments

https://stackblitz.com/edit/inputinconsistencies

I also have a forum discussion open at https://www.infragistics.com/community/forums/f/ignite-ui-for-angular/119412/how-to-make-a-date-and-time-picker-required-template-driven-forms but haven't had any more answers there for workarounds, and the ones given are insufficient to solve my case.

@kdinev

This comment has been minimized.

Copy link
Member

kdinev commented Jan 16, 2019

@ninaarens I played around with your sample and made a few modifications. I applied the required and appMinDate to the datepicker for the general form validation, and left them on the templated input, for the individual input validation.

  <igx-date-picker name="datePicker" required [(ngModel)]="date" [appMinDate]="minDate">
      <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value" let-displayData="displayData">
          <igx-input-group (click)="openDialog()">
              <igx-prefix>
                  <igx-icon>today</igx-icon>
              </igx-prefix>
              <label igxLabel>Date</label>
              <input igxInput name="date" [value]="displayData" required />
          </igx-input-group>
      </ng-template>
  </igx-date-picker>

This enables the button correctly through form interaction. And also marks the date picker templated input as invalid individually. However, I would suggest one more improvement. We have disabledDates as an input for the datepicker. You can make all the dates before the current date to not be active, which will also show your user they cannot select them:

https://www.infragistics.com/angular-docs/typescript/classes/igxdatepickercomponent.html#disableddates

Here's an example:

export class DatepickerSample6Component implements OnInit {
  public name: string;
  public date: Date;
  public minDate: number = Date.now();
  public disabledDates: DateRangeDescriptor[] = [
    { type: DateRangeType.Before, dateRange: [new Date()]}
  ];

  @ViewChild("picker")
  public picker: IgxDatePickerComponent;

  ngOnInit() {
    this.picker.disabledDates = this.disabledDates;
  }
}
@ninaarens

This comment has been minimized.

Copy link
Author

ninaarens commented Jan 16, 2019

Thank you for your response, that works much more as expected. But not quite there yet. I've included a second sample which also includes feedback from the forum. The remaining inconsistency is that when you pick a date in the past, the field will colour green rather than red. Is there a workaround for this?

https://stackblitz.com/edit/inputinconsistencies2

@kdinev

This comment has been minimized.

Copy link
Member

kdinev commented Jan 16, 2019

@ninaarens With the current binding, the custom validator doesn't execute on your input. The reason for that is that the input is not an AbstractControl unless you use [(ngModel)] on it. Change your code to:

<igx-date-picker name="datePicker" required [(ngModel)]="date" [appMinDate]="minDate">
  <ng-template igxDatePickerTemplate let-openDialog="openDialog"
               let-value="value" let-displayData="displayData">
    <igx-input-group (click)="openDialog()">
      <igx-prefix>
        <igx-icon>today</igx-icon>
      </igx-prefix>
      <label igxLabel>Date</label>
      <input #dateInput igxInput name="date" [(ngModel)]="displayData" [appMinDate]="minDate" />
    </igx-input-group>
  </ng-template>
</igx-date-picker>

I've also updated your sample to show the disabled dates: https://stackblitz.com/edit/inputinconsistencies2-runpc1

@ninaarens

This comment has been minimized.

Copy link
Author

ninaarens commented Jan 16, 2019

Thank you, that explains it well. However I need the required attribute on the input field, because I want to show the user that the field is required (that is why I use a template here). But when I do that, the field lights up in red straight on page load. And that is not what I want, because this doesn't happen with the name input either.

@kdinev

This comment has been minimized.

Copy link
Member

kdinev commented Jan 16, 2019

@ninaarens We've identified the required validation as an issue, and we've resolved it #3550

The fix will be available in the next tag, which should happen at the end of this week!

@kdinev

This comment has been minimized.

Copy link
Member

kdinev commented Jan 16, 2019

@ninaarens Closing the issue for now. If there's anything else, please reopen it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment