fix(date-picker): move isReaquired to ngAfterViewChecked, #6471

Author: wnvko

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

@@ -11,8 +11,6 @@
             [disabled]="disabled"
             (blur)="onBlur($event)"
             readonly
-            required="required"
-            [shouldCheckValidity]="false"
         />
     </igx-input-group>
 </ng-template>
@@ -38,8 +36,6 @@
             (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.spec.ts

@@ -1376,7 +1376,12 @@ describe('IgxDatePicker', () => {
                 onClosing: new EventEmitter<OverlayClosingEventArgs>()
             };
             element = {};
-            cdr = { markForCheck: () => {}, detach: () => {}, reattach: () => {}};
+            cdr = {
+                markForCheck: () => {},
+                detectChanges: () => {},
+                detach: () => {},
+                reattach: () => {}
+            };
             moduleRef = {};
             injector = { get: () => ngModel };
             inputGroup = new IgxInputGroupComponent(null, null);

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

@@ -17,7 +17,8 @@ import {
     NgModuleRef,
     OnInit,
     AfterViewInit,
-    Injector
+    Injector,
+    AfterViewChecked
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
 import {
@@ -143,7 +144,8 @@ const noop = () => { };
         }
     `]
 })
-export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor, EditorProvider, OnInit, AfterViewInit, OnDestroy {
+export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor,
+          EditorProvider, OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
     /**
      * An @Input property that sets the `IgxDatePickerComponent` label.
      * The default label is 'Date'.
@@ -945,6 +947,18 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         }
     }
 
+    public ngAfterViewChecked() {
+        // if one sets mode at run time this forces initialization of new igxInputGroup
+        // As a result a new igxInputDirective is initialized too. In ngAfterViewInit of
+        // the new directive isRequired of the igxInputGroup is set again. However
+        // ngAfterViewInit of date picker is not called again and we may finish with wrong
+        // isRequired in igxInputGroup. This is why we should set it her, only when needed
+        if (this.inputGroup && this.inputGroup.isRequired !== this.required) {
+            this.inputGroup.isRequired = this.required;
+            this._cdr.detectChanges();
+        }
+    }
+
     protected onStatusChanged() {
         if ((this._ngControl.control.touched || this._ngControl.control.dirty) &&
             (this._ngControl.control.validator || this._ngControl.control.asyncValidator)) {
@@ -955,6 +969,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                 input.valid = this._ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
             }
         }
+
+        this.inputGroup.isRequired = this.required;
     }
 
     /**

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -108,18 +108,14 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
         if (typeof value === 'boolean') {
             this.nativeElement.required = this.inputGroup.isRequired = value;
 
-            if (value && !this.nativeElement.checkValidity() && this.shouldCheckValidity) {
+            if (value && !this.nativeElement.checkValidity()) {
                 this.valid = IgxInputState.INVALID;
             } else {
                 this.valid = IgxInputState.INITIAL;
             }
         }
     }
 
-    /** @hidden @internal */
-    @Input()
-    public shouldCheckValidity = true;
-
     /**
      * Gets whether the igxInput is required.
      * ```typescript
@@ -175,7 +171,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
             if (!this.ngControl.valid) {
                 this.valid = IgxInputState.INVALID;
             }
-        } else if (this._hasValidators() && !this.nativeElement.checkValidity() && this.shouldCheckValidity) {
+        } else if (this._hasValidators() && !this.nativeElement.checkValidity()) {
             this.valid = IgxInputState.INVALID;
         }
     }
@@ -341,7 +337,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
     }
 
     private checkValidity() {
-        if (!this.ngControl && this._hasValidators() && this.shouldCheckValidity) {
+        if (!this.ngControl && this._hasValidators()) {
             this.valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID;
         }
     }