fix(date-picker): updae ngModel on outside click, #6471

If we drop down the calendar when input has no value,
onBlur gets called but we do not call onTouchCallback
which is correct. However if after we click outside the
input the model is never validated. This is why we
should validate model, in this case, and in onClosing event.

Author: wnvko

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

@@ -854,6 +854,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                 const input = this.getEditElement();
                 if (input && !(event.event && this.mode === InteractionMode.DropDown)) {
                     input.focus();
+                } else {
+                    this._updateValidity();
                 }
             });
 
@@ -1063,14 +1065,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
             this.calculateDate(event.target.value, event.type);
         }
 
-        this._onTouchedCallback();
         if (this.collapsed) {
-            const input = this.readonlyInputDirective || this.editableInputDirective || this.input;
-            if (this._ngControl && !this._ngControl.valid) {
-                input.valid = IgxInputState.INVALID;
-            } else {
-                input.valid = IgxInputState.INITIAL;
-            }
+            this._updateValidity();
         }
     }
 
@@ -1336,6 +1332,15 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         return DatePickerUtil.addPromptCharsEditMode(this.dateFormatParts, this.value, changedValue);
     }
 
+    private _updateValidity() {
+        this._onTouchedCallback();
+        const input = this.readonlyInputDirective || this.editableInputDirective || this.input;
+        if (this._ngControl && !this._ngControl.valid) {
+            input.valid = IgxInputState.INVALID;
+        } else {
+            input.valid = IgxInputState.INITIAL;
+        }
+    }
 }
 
 /**

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

@@ -941,6 +941,8 @@ export class IgxTimePickerComponent implements
                 const input = this.getEditElement();
                 if (input && !(event.event && this.mode === InteractionMode.DropDown)) {
                     input.focus();
+                } else {
+                    this.updateValidity();
                 }
             });
 
@@ -2022,13 +2024,8 @@ export class IgxTimePickerComponent implements
             }
         }
 
-        this._onTouchedCallback();
         if (this.toggleRef.collapsed) {
-            if (this._ngControl && !this._ngControl.valid) {
-                this._inputDirective.valid = IgxInputState.INVALID;
-            } else {
-                this._inputDirective.valid = IgxInputState.INITIAL;
-            }
+            this.updateValidity();
         }
     }
 
@@ -2125,6 +2122,15 @@ export class IgxTimePickerComponent implements
             ((!showHours || !showMinutes || !showSeconds) && this._amPmPos.has(cursor)) ||
             (!showHours && (!showMinutes || !showSeconds) && this._amPmPos.has(cursor));
     }
+
+    private updateValidity() {
+        this._onTouchedCallback();
+        if (this._ngControl && !this._ngControl.valid) {
+            this._inputDirective.valid = IgxInputState.INVALID;
+        } else {
+            this._inputDirective.valid = IgxInputState.INITIAL;
+        }
+    }
 }
 
 /**