fix(date-picker): stop input self validation, #6471

Author: wnvko

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

@@ -11,6 +11,8 @@
             [disabled]="disabled"
             (blur)="onBlur($event)"
             readonly
+            required="required"
+            [shouldCheckValidity]="false"
         />
     </igx-input-group>
 </ng-template>
@@ -36,6 +38,8 @@
             (wheel)="onWheel($event)"
             (input)="onInput($event)"
             (focus)="onFocus()"
+            required="required"
+            [shouldCheckValidity]="false"
         />
         <igx-suffix *ngIf="!isEmpty" (click)="clear()">
             <igx-icon>clear</igx-icon>

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

@@ -336,6 +336,15 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         return this._dropDownOverlaySettings || this._defaultDropDownOverlaySettings;
     }
 
+    public get required(): boolean {
+        if (this._ngControl && this._ngControl.control && this._ngControl.control.validator) {
+            // Run the validation with empty object to check if required is enabled.
+            const error = this._ngControl.control.validator({} as AbstractControl);
+            // this.inputGroup.isRequired = error && error.required;
+            return error && error.required;
+        }
+    }
+
     public set dropDownOverlaySettings(value: OverlaySettings) {
         this._dropDownOverlaySettings = value;
     }
@@ -884,8 +893,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         if (this._ngControl) {
             this._statusChanges$ = this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
         }
-
-        this.manageRequiredAsterisk();
     }
 
     protected onStatusChanged() {
@@ -898,16 +905,6 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                 input.valid = this._ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
             }
         }
-        this.manageRequiredAsterisk();
-    }
-
-    protected manageRequiredAsterisk(): void {
-        if (this._ngControl && this._ngControl.control.validator) {
-            // Run the validation with empty object to check if required is enabled.
-            const error = this._ngControl.control.validator({} as AbstractControl);
-            this.inputGroup.isRequired = error && error.required;
-            this._cdr.markForCheck();
-        }
     }
 
     /**
@@ -1332,7 +1329,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         return DatePickerUtil.addPromptCharsEditMode(this.dateFormatParts, this.value, changedValue);
     }
 
-    private _updateValidity() {
+    public _updateValidity() {
         this._onTouchedCallback();
         const input = this.readonlyInputDirective || this.editableInputDirective || this.input;
         if (input && this._ngControl && !this._ngControl.valid) {