Merge branch '9.1.x' into mkirova/fix-5459-9.1.x

Author: ChronosSF

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 = (fixture.componentInstance as DateRangeTwoInputsNgModelTestComponent).range;
+                    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,13 @@ 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();
+            this.updateInputs();
+        });
     }
 
     /** @hidden @internal */
@@ -915,13 +918,15 @@ 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);
+            this._value = {
+                start: start.dateTimeEditor.value,
+                end: end.dateTimeEditor.value
+            };
         }
     }
 

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

@@ -1,10 +1,10 @@
 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
 } from '@angular/core';
 import {
   ControlValueAccessor,
-  Validator, AbstractControl, ValidationErrors, NG_VALIDATORS, NgControl, NG_VALUE_ACCESSOR,
+  Validator, AbstractControl, ValidationErrors, NG_VALIDATORS, NG_VALUE_ACCESSOR,
 } from '@angular/forms';
 import { formatDate, DOCUMENT } from '@angular/common';
 import { IgxMaskDirective } from '../mask/mask.directive';
@@ -569,8 +569,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);
   }