Igniteui-angular: Templated datepicker has inconsistent behavior compared to input group

[ninaarens]

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]

@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]

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]

@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]

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]

@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]

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