fix(datepicker): Fix validation for user template #7800

Author: IvayloG

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ElementRef, EventEmitter } from '@angular/core';
+import { Component, ViewChild, ElementRef, EventEmitter, QueryList } from '@angular/core';
 import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
 import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators, NgControl } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -14,6 +14,7 @@ import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxCalendarModule } from '../calendar/public_api';
 import { InteractionMode } from '../core/enums';
 import { DateRangeType } from '../core/dates/dateRange';
+import { IgxIconModule } from '../icon/public_api';
 import {
     OverlayCancelableEventArgs,
     OverlayClosingEventArgs,
@@ -40,7 +41,7 @@ describe('IgxDatePicker', () => {
                 IgxDatePickerDropdownButtonsComponent
             ],
             imports: [IgxDatePickerModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule,
-                IgxButtonModule, IgxTextSelectionModule]
+                IgxButtonModule, IgxTextSelectionModule, IgxIconModule]
         })
             .compileComponents();
     }));
@@ -1283,11 +1284,13 @@ describe('IgxDatePicker', () => {
         let fixture: ComponentFixture<IgxDatePickerReactiveFormComponent>;
         let datePickerOnChangeComponent: IgxDatePickerComponent;
         let datePickerOnBlurComponent: IgxDatePickerComponent;
+        let datePickerTemplateIGComponent: IgxDatePickerComponent;
 
         beforeEach(() => {
             fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent);
             datePickerOnChangeComponent = fixture.componentInstance.datePickerOnChangeComponent;
             datePickerOnBlurComponent = fixture.componentInstance.datePickerOnBlurComponent;
+            datePickerTemplateIGComponent = fixture.componentInstance.datePickerTemplateIGComponent;
             fixture.detectChanges();
         });
 
@@ -1352,6 +1355,45 @@ describe('IgxDatePicker', () => {
             expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
         }));
 
+        it('Should set date picker status to invalid if date is included in disabledDates range and user pass a template', fakeAsync(() => {
+            datePickerTemplateIGComponent.disabledDates = [{ type: DateRangeType.Before, dateRange: [new Date()] }];
+            const inputDirective = datePickerTemplateIGComponent.inputDirective;
+
+            const today = new Date();
+            datePickerTemplateIGComponent.value = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+            fixture.detectChanges();
+            expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
+
+            datePickerTemplateIGComponent.value = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+            fixture.detectChanges();
+            expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
+
+            datePickerTemplateIGComponent.disabledDates = [{ type: DateRangeType.Before,
+                                            dateRange: [new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2)] }];
+            fixture.detectChanges();
+            expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
+        }));
+
+        it('Should set date picker status to invalid on blur when pass or change a template', fakeAsync(() => {
+            datePickerTemplateIGComponent.disabledDates = [{ type: DateRangeType.Before, dateRange: [new Date()] }];
+            const templateInputDirective = datePickerTemplateIGComponent.inputDirective;
+            const templateInput =  templateInputDirective.nativeElement;
+            templateInput.dispatchEvent(new Event('blur'));
+            fixture.detectChanges();
+            expect(templateInputDirective.valid).toEqual(IgxInputState.INVALID);
+
+            fixture.componentInstance.useCustomTemplate = false;
+            fixture.detectChanges();
+            // obtain the default template input directive & input
+            const inputDirective = datePickerTemplateIGComponent.inputDirective;
+            const input =  inputDirective.nativeElement;
+            expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
+
+            input.dispatchEvent(new Event('blur'));
+            fixture.detectChanges();
+            expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
+        }));
+
         // Bug #6025 Date picker does not disable in reactive form
         it('Should disable when form is disabled', () => {
             const formGroup: FormGroup = fixture.componentInstance.reactiveForm;
@@ -1401,7 +1443,21 @@ describe('IgxDatePicker', () => {
 
         it('should initialize date picker with required correctly', () => {
             const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
-            datePicker['inputGroup'] = inputGroup;
+            datePicker['_inputGroup'] = inputGroup;
+            datePicker['_inputDirectiveUserTemplates'] = new QueryList();
+            ngModel.control.validator = () => ({ required: true });
+            datePicker.ngOnInit();
+            datePicker.ngAfterViewInit();
+            datePicker.ngAfterViewChecked();
+
+            expect(datePicker).toBeDefined();
+            expect(inputGroup.isRequired).toBeTruthy();
+        });
+
+        it('should initialize date picker with required correctly with user template input-group', () => {
+            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
+            datePicker['_inputGroupUserTemplate'] = inputGroup;
+            datePicker['_inputDirectiveUserTemplates'] = new QueryList();
             ngModel.control.validator = () => ({ required: true });
             datePicker.ngOnInit();
             datePicker.ngAfterViewInit();
@@ -1413,7 +1469,8 @@ describe('IgxDatePicker', () => {
 
         it('should update inputGroup isRequired correctly', () => {
             const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
-            datePicker['inputGroup'] = inputGroup;
+            datePicker['_inputGroup'] = inputGroup;
+            datePicker['_inputDirectiveUserTemplates'] = new QueryList();
             datePicker.ngOnInit();
             datePicker.ngAfterViewInit();
             datePicker.ngAfterViewChecked();
@@ -1581,6 +1638,18 @@ export class IgxDatePickerOpeningComponent {
     <form [formGroup]="reactiveForm">
         <igx-date-picker formControlName="datePickerOnChange" #datePickerOnChangeComponent></igx-date-picker>
         <igx-date-picker formControlName="datePickerOnBlur" #datePickerOnBlurComponent></igx-date-picker>
+        <igx-date-picker formControlName="datePickerIGTemplate" #datePickerTemplateIGComponent>
+            <ng-template *ngIf="useCustomTemplate" igxDatePickerTemplate let-openDialog="openDialog" let-value="value"
+                let-displayData="displayData">
+                <igx-input-group>
+                    <label igxLabel>Date</label>
+                    <input igxInput [value]="displayData"/>
+                    <igx-suffix>
+                        <igx-icon>today</igx-icon>
+                    </igx-suffix>
+                </igx-input-group>
+            </ng-template>
+        </igx-date-picker>
     </form>
 `
 })
@@ -1591,13 +1660,17 @@ class IgxDatePickerReactiveFormComponent {
     @ViewChild('datePickerOnBlurComponent', { read: IgxDatePickerComponent, static: true })
     public datePickerOnBlurComponent: IgxDatePickerComponent;
 
-    reactiveForm: FormGroup;
+    @ViewChild('datePickerTemplateIGComponent', { read: IgxDatePickerComponent, static: true })
+    public datePickerTemplateIGComponent: IgxDatePickerComponent;
 
+    reactiveForm: FormGroup;
+    public useCustomTemplate = true;
     constructor(fb: FormBuilder) {
         const date = new Date(2000, 10, 15);
         this.reactiveForm = fb.group({
             datePickerOnChange: [date, Validators.required],
-            datePickerOnBlur: [date, { updateOn: 'blur', validators: Validators.required }]
+            datePickerOnBlur: [date, { updateOn: 'blur', validators: Validators.required }],
+            datePickerIGTemplate: [date, Validators.required]
         });
     }
 }