fix(date-range-picker): set internal value of picker with present ngModels #7353

refactor(date-editor): expose ngControl

Author: jackofdiamond5

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts

@@ -77,7 +77,6 @@ export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent {
     public updateInputValidity(state: IgxInputState) {
         this.inputDirective.valid = state;
     }
-
 }
 
 /**

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

@@ -491,7 +491,8 @@ describe('IgxDateRangePicker', () => {
                 TestBed.configureTestingModule({
                     declarations: [
                         DateRangeTestComponent,
-                        DateRangeTwoInputsTestComponent
+                        DateRangeTwoInputsTestComponent,
+                        DateRangeTwoInputsNgModelTestComponent
                     ],
                     imports: [IgxDateRangePickerModule, IgxDateTimeEditorModule, IgxInputGroupModule, FormsModule, NoopAnimationsModule]
                 })
@@ -584,6 +585,7 @@ describe('IgxDateRangePicker', () => {
                     verifyDateRange();
                 });
             });
+
             describe('Keyboard navigation', () => {
                 it('should toggle the calendar with ALT + DOWN/UP ARROW key', fakeAsync(() => {
                     expect(dateRange.collapsed).toBeTruthy();
@@ -630,6 +632,19 @@ describe('IgxDateRangePicker', () => {
                     expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
                 }));
             });
+
+            describe('Data binding', () => {
+                it('should properly update component value with ngModel bound to projected inputs - #7353', fakeAsync(() => {
+                    fixture = TestBed.createComponent(DateRangeTwoInputsNgModelTestComponent);
+                    fixture.detectChanges();
+                    const range = { start: new Date(2020, 1, 1), end: new Date(2020, 1, 4) };
+                    fixture.componentInstance.dateRange.open();
+                    fixture.detectChanges();
+                    tick();
+                    expect(fixture.componentInstance.dateRange.value.start.getTime()).toEqual(range.start.getTime());
+                    expect(fixture.componentInstance.dateRange.value.end.getTime()).toEqual(range.end.getTime());
+                }));
+            });
         });
 
         describe('Calendar UI', () => {
@@ -821,6 +836,22 @@ export class DateRangeTwoInputsTestComponent extends DateRangeTestComponent {
     range;
 }
 
+@Component({
+    selector: 'igx-date-range-two-inputs-ng-model',
+    template: `
+    <igx-date-range-picker [mode]="'dropdown'">
+        <igx-date-range-start>
+            <input igxInput [(ngModel)]="range.start" igxDateTimeEditor>
+        </igx-date-range-start>
+        <igx-date-range-end>
+            <input igxInput [(ngModel)]="range.end" igxDateTimeEditor>
+        </igx-date-range-end>
+    </igx-date-range-picker>`
+})
+export class DateRangeTwoInputsNgModelTestComponent extends DateRangeTestComponent {
+    public range = { start: new Date(2020, 1, 1), end: new Date(2020, 1, 4) };
+}
+
 @Component({
     selector: 'igx-date-range-single-input-label-test',
     template: `

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

@@ -52,8 +52,6 @@ import {
     IgxPickerToggleComponent
 } from './date-range-picker-inputs.common';
 
-
-
 /**
  * Provides the ability to select a range of dates from a calendar UI or editable inputs.
  *
@@ -638,8 +636,12 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
         if (this._ngControl) {
             this._statusChanges$ = this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
         }
-        this.initialSetValue();
-        this.updateInputs();
+
+        // delay the invocation of initialSetValue
+        // until the current change detection cycle has completed
+        Promise.resolve().then(() => {
+            this.initialSetValue();
+        });
     }
 
     /** @hidden @internal */
@@ -915,13 +917,23 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     }
 
     private initialSetValue() {
-        // if there is no value, no ngControl but we have inputs we may have value set trough
-        // inputs' ngModels - we should generate our initial control value
-        if (!this.value && this.hasProjectedInputs && !this._ngControl) {
-            const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent).dateTimeEditor.value;
-            const end = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent).dateTimeEditor.value;
-            this.updateValue({ start, end });
-
+        // if there is no value and no ngControl on the picker but we have inputs we may have value set through
+        // their ngModels - we should generate our initial control value
+        if ((!this.value || (!this.value.start && !this.value.end)) && this.hasProjectedInputs && !this._ngControl) {
+            const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent);
+            const end = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent);
+            const value = {
+                start: start.dateTimeEditor.value,
+                end: end.dateTimeEditor.value
+            };
+
+            if (start.dateTimeEditor.ngControl && end.dateTimeEditor.ngControl) {
+                // ngModel will handle value setting in the editors
+                // we need to only set the internal value of the picker
+                this._value = value;
+            } else {
+                this.updateValue(value);
+            }
         }
     }
 

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts

@@ -26,8 +26,8 @@ describe('IgxDateTimeEditor', () => {
         let inputFormat: string;
         let inputDate: string;
         function initializeDateTimeEditor(control?: NgControl) {
-            // const injector = { get: () => control };
-            dateTimeEditor = new IgxDateTimeEditorDirective(renderer2, elementRef, maskParsingService, DOCUMENT, locale);
+            const injector = { get: () => control };
+            dateTimeEditor = new IgxDateTimeEditorDirective(renderer2, elementRef, maskParsingService, DOCUMENT, locale, injector);
             dateTimeEditor.inputFormat = inputFormat;
             dateTimeEditor.ngOnInit();
 

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -1,6 +1,6 @@
 import {
   Directive, Input, ElementRef,
-  Renderer2, NgModule, Output, EventEmitter, Inject, LOCALE_ID, OnChanges, SimpleChanges, Host, Optional, Injector
+  Renderer2, NgModule, Output, EventEmitter, Inject, LOCALE_ID, OnChanges, SimpleChanges, Host, Optional, Injector, OnInit
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -51,7 +51,7 @@ import { IgxDateTimeEditorEventArgs, DatePartInfo, DatePart } from './date-time-
     { provide: NG_VALIDATORS, useExisting: IgxDateTimeEditorDirective, multi: true }
   ]
 })
-export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnChanges, Validator, ControlValueAccessor {
+export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnChanges, OnInit, Validator, ControlValueAccessor {
   /**
    * Locale settings used for value formatting.
    *
@@ -188,6 +188,9 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   @Output()
   public validationFailed = new EventEmitter<IgxDateTimeEditorEventArgs>();
 
+  /** @hidden @internal */
+  public ngControl: NgControl;
+
   private _value: Date;
   private _format: string;
   private document: Document;
@@ -236,7 +239,8 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     protected elementRef: ElementRef,
     protected maskParser: MaskParsingService,
     @Inject(DOCUMENT) private _document: any,
-    @Inject(LOCALE_ID) private _locale: any) {
+    @Inject(LOCALE_ID) private _locale: any,
+    private injector: Injector) {
     super(elementRef, maskParser, renderer);
     this.document = this._document as Document;
     this.locale = this.locale || this._locale;
@@ -256,6 +260,10 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     }
   }
 
+  public ngOnInit(): void {
+    this.ngControl = this.injector.get<NgControl>(NgControl, null);
+  }
+
   /** Clear the input element value. */
   public clear(): void {
     this.updateValue(null);
@@ -569,8 +577,8 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     return date && date.getTime && !isNaN(date.getTime());
   }
 
-    // TODO: move parseDate to utils
-    public parseDate(val: string): Date | null {
+  // TODO: move parseDate to utils
+  public parseDate(val: string): Date | null {
     if (!val) { return null; }
     return DatePickerUtil.parseValueFromMask(val, this._inputDateParts, this.promptChar);
   }