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

@@ -333,6 +333,20 @@ describe('IgxDatePicker', () => {
                 expect(datePicker.locale).toEqual('en-US');
                 expect(datePicker.weekStart).toEqual(WEEKDAYS.FRIDAY);
             }));
+
+            it('should set initial validity state when the form group is disabled', () => {
+                fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent);
+                fixture.detectChanges();
+                datePicker = fixture.componentInstance.datePicker;
+
+                (fixture.componentInstance as IgxDatePickerReactiveFormComponent).markAsTouched();
+                fixture.detectChanges();
+                expect((datePicker as any).inputDirective.valid).toBe(IgxInputState.INVALID);
+
+                (fixture.componentInstance as IgxDatePickerReactiveFormComponent).disableForm();
+                fixture.detectChanges();
+                expect((datePicker as any).inputDirective.valid).toBe(IgxInputState.INITIAL);
+            });
         });
 
         describe('Projected elements', () => {
@@ -1380,4 +1394,13 @@ export class IgxDatePickerReactiveFormComponent {
         this.form.get('date').setValidators(Validators.required);
         this.form.get('date').updateValueAndValidity();
     }
+
+    public markAsTouched() {
+        this.form.get('date').markAsTouched();
+        this.form.get('date').updateValueAndValidity();
+    }
+
+    public disableForm() {
+        this.form.disable();
+    }
 }

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

@@ -816,6 +816,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     }
 
     private onStatusChanged = () => {
+        this.disabled = this._ngControl.disabled;
         this.updateValidity();
         this.inputGroup.isRequired = this.required;
     };

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

@@ -1,9 +1,9 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing';
 import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core';
-import { IgxInputGroupModule } from '../input-group/public_api';
+import { IgxInputGroupModule, IgxInputState } from '../input-group/public_api';
 import { PickerInteractionMode } from '../date-common/types';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule, UntypedFormControl } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { IgxDateRangePickerModule } from './date-range-picker.module';
 import { By } from '@angular/platform-browser';
 import { ControlsFunction } from '../test-utils/controls-functions.spec';
@@ -338,7 +338,8 @@ describe('IgxDateRangePicker', () => {
                     declarations: [
                         DateRangeTestComponent,
                         DateRangeDefaultComponent,
-                        DateRangeDisabledComponent
+                        DateRangeDisabledComponent,
+                        DateRangeReactiveFormComponent
                     ],
                     imports: [
                         CommonModule,
@@ -349,7 +350,8 @@ describe('IgxDateRangePicker', () => {
                         FormsModule,
                         NoopAnimationsModule,
                         IgxPickersCommonModule,
-                        IgxCalendarContainerModule
+                        IgxCalendarContainerModule,
+                        ReactiveFormsModule
                     ]
                 })
                     .compileComponents();
@@ -773,6 +775,20 @@ describe('IgxDateRangePicker', () => {
 
                 expect((dateRange as any).calendar.selectedDates.length).toBeGreaterThan(0);
             }));
+
+            it('should set initial validity state when the form group is disabled', () => {
+                const fix = TestBed.createComponent(DateRangeReactiveFormComponent);
+                fix.detectChanges();
+                const dateRangePicker = fix.componentInstance.dateRange;
+
+                fix.componentInstance.markAsTouched();
+                fix.detectChanges();
+                expect(dateRangePicker.inputDirective.valid).toBe(IgxInputState.INVALID);
+
+                fix.componentInstance.disableForm();
+                fix.detectChanges();
+                expect(dateRangePicker.inputDirective.valid).toBe(IgxInputState.INITIAL);
+            });
         });
 
         describe('Two Inputs', () => {
@@ -786,7 +802,8 @@ describe('IgxDateRangePicker', () => {
                         DateRangeTwoInputsTestComponent,
                         DateRangeTwoInputsNgModelTestComponent,
                         DateRangeDisabledComponent,
-                        DateRangeTwoInputsDisabledComponent
+                        DateRangeTwoInputsDisabledComponent,
+                        DateRangeReactiveFormComponent
                     ],
                     imports: [
                         CommonModule,
@@ -797,7 +814,8 @@ describe('IgxDateRangePicker', () => {
                         IgxInputGroupModule,
                         FormsModule,
                         NoopAnimationsModule,
-                        IgxIconModule
+                        IgxIconModule,
+                        ReactiveFormsModule
                     ]
                 })
                     .compileComponents();
@@ -1012,6 +1030,22 @@ describe('IgxDateRangePicker', () => {
                     expect((rangePicker as any).calendar.selectedDates.length).toBe(7);
                     flush();
                 }));
+
+                it('should set initial validity state when the form group is disabled', () => {
+                    const fix = TestBed.createComponent(DateRangeReactiveFormComponent);
+                    fix.detectChanges();
+                    const dateRangePicker = fix.componentInstance.dateRangeWithTwoInputs;
+
+                    fix.componentInstance.markAsTouched();
+                    fix.detectChanges();
+                    expect(dateRangePicker.projectedInputs.first.inputDirective.valid).toBe(IgxInputState.INVALID);
+                    expect(dateRangePicker.projectedInputs.last.inputDirective.valid).toBe(IgxInputState.INVALID);
+
+                    fix.componentInstance.disableForm();
+                    fix.detectChanges();
+                    expect(dateRangePicker.projectedInputs.first.inputDirective.valid).toBe(IgxInputState.INITIAL);
+                    expect(dateRangePicker.projectedInputs.last.inputDirective.valid).toBe(IgxInputState.INITIAL);
+                });
             });
 
             describe('Keyboard navigation', () => {
@@ -1565,3 +1599,46 @@ export class DateRangeDisabledComponent extends DateRangeTestComponent {
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DateRangeTwoInputsDisabledComponent extends DateRangeDisabledComponent { }
+
+@Component({
+    template: `
+        <form class="wrapper" [formGroup]="form">
+        	<igx-date-range-picker #range formControlName="range">
+        		<label igxLabel>Range</label>
+        	</igx-date-range-picker>
+            <igx-date-range-picker #twoInputs formControlName="twoInputs">
+                <igx-date-range-start>
+                    <input igxInput igxDateTimeEditor>
+                </igx-date-range-start>
+                <igx-date-range-end>
+                    <input igxInput igxDateTimeEditor>
+                </igx-date-range-end>
+            </igx-date-range-picker>
+        </form>`
+})
+export class DateRangeReactiveFormComponent {
+    @ViewChild('range', {read: IgxDateRangePickerComponent}) public dateRange: IgxDateRangePickerComponent;
+    @ViewChild('twoInputs', {read: IgxDateRangePickerComponent}) public dateRangeWithTwoInputs: IgxDateRangePickerComponent;
+
+    public form = this.fb.group({
+        range: ['', Validators.required],
+        twoInputs: ['', Validators.required]
+    });
+
+    constructor(private fb: UntypedFormBuilder) { }
+
+    public markAsTouched() {
+        if (!this.form.valid) {
+            for (const key in this.form.controls) {
+                if (this.form.controls[key]) {
+                    this.form.controls[key].markAsTouched();
+                    this.form.controls[key].updateValueAndValidity();
+                }
+            }
+        }
+    }
+
+    public disableForm() {
+        this.form.disable();
+    }
+}

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

@@ -649,13 +649,13 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
 
     protected onStatusChanged = () => {
         if (this.inputGroup) {
-            this.inputDirective.valid = this.isTouchedOrDirty
+            this.inputDirective.valid = this.isTouchedOrDirty && !this._ngControl.disabled
                 ? this.getInputState(this.inputGroup.isFocused)
                 : IgxInputState.INITIAL;
         } else if (this.hasProjectedInputs) {
             this.projectedInputs
                 .forEach(i => {
-                    i.inputDirective.valid = this.isTouchedOrDirty
+                    i.inputDirective.valid = this.isTouchedOrDirty && !this._ngControl.disabled
                         ? this.getInputState(i.isFocused)
                         : IgxInputState.INITIAL;;
                 });

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

@@ -1714,6 +1714,20 @@ describe('IgxTimePicker', () => {
                 expect(inputGroupRequiredClass).not.toBeNull();
                 expect(asterisk).toBe('"*"');
             });
+
+            it('should set initial validity state when the form group is disabled', () => {
+                fixture = TestBed.createComponent(IgxTimePickerReactiveFormComponent);
+                fixture.detectChanges();
+                timePicker = fixture.componentInstance.timePicker;
+
+                (fixture.componentInstance as IgxTimePickerReactiveFormComponent).markAsTouched();
+                fixture.detectChanges();
+                expect((timePicker as any).inputDirective.valid).toBe(IgxInputState.INVALID);
+
+                (fixture.componentInstance as IgxTimePickerReactiveFormComponent).disableForm();
+                fixture.detectChanges();
+                expect((timePicker as any).inputDirective.valid).toBe(IgxInputState.INITIAL);
+            });
         });
     });
 });
@@ -1802,4 +1816,13 @@ export class IgxTimePickerReactiveFormComponent {
         this.form.get('time').setValidators(Validators.required);
         this.form.get('time').updateValueAndValidity();
     }
+
+    public markAsTouched() {
+        this.form.get('time').markAsTouched();
+        this.form.get('time').updateValueAndValidity();
+    }
+
+    public disableForm() {
+        this.form.disable();
+    }
 }

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -1066,7 +1066,8 @@ export class IgxTimePickerComponent extends PickerBaseDirective
 
     protected onStatusChanged() {
         if ((this._ngControl.control.touched || this._ngControl.control.dirty) &&
-            (this._ngControl.control.validator || this._ngControl.control.asyncValidator)) {
+            (this._ngControl.control.validator || this._ngControl.control.asyncValidator) &&
+            !this._ngControl.disabled) {
             if (this._inputGroup.isFocused) {
                 this.inputDirective.valid = this._ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
             } else {