fix(date-picker): trigger validation on min/max date change (vmware-c…

…larity#1138)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: vmware-clarity#816  CDE-1584

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: Venkatesh Rajendran <[email protected]>

projects/angular/src/forms/datepicker/date-input.ts

@@ -98,11 +98,13 @@ export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implement
   @Input()
   set min(dateString: string) {
     this.dateIOService.setMinDate(dateString);
+    this.triggerControlValidation();
   }
 
   @Input()
   set max(dateString: string) {
     this.dateIOService.setMaxDate(dateString);
+    this.triggerControlValidation();
   }
 
   get disabled() {
@@ -192,6 +194,14 @@ export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implement
     }
   }
 
+  private triggerControlValidation() {
+    if (this.datepickerHasFormControl()) {
+      // Set `emitEvent` to false to prevent unnecessary value change event. Status change event will be emitted by `setErrors` below.
+      this.control.control?.updateValueAndValidity({ emitEvent: false });
+      this.control.control?.setErrors(this.control.control.errors);
+    }
+  }
+
   private populateServicesFromContainerComponent() {
     if (!this.container) {
       this.dateIOService = this.getProviderFromContainer(DateIOService);

projects/demo/src/app/datepicker/datepicker-min-max.html

@@ -4,24 +4,35 @@
  * The full license information can be found in LICENSE in the root directory of this project.
 -->
 
-<div clrForm>
-  <h6>Min/Max Dates</h6>
-  <p></p>
+<h3>Min/Max Dates</h3>
+<p></p>
+<h6>Reactive Form</h6>
+<form clrForm [formGroup]="reactiveDateForm" novalidate>
+  <clr-date-container>
+    <label for="dateControl">Date</label>
+    <input id="dateControl" name="date" type="date" clrDate formControlName="date" [min]="minDate" [max]="maxDate" />
+    <clr-control-error *clrIfError="'min'">Value must be on or after min date</clr-control-error>
+    <clr-control-error *clrIfError="'max'">Value must be on or before max date</clr-control-error>
+  </clr-date-container>
+</form>
+
+<h6>Template Driven Form</h6>
+<form clrForm>
   <clr-date-container>
     <label>Date</label>
-    <input type="date" autocomplete="off" [(ngModel)]="model" clrDate [min]="minDate" [max]="maxDate" />
+    <input type="date" autocomplete="off" name="model" [(ngModel)]="model" clrDate [min]="minDate" [max]="maxDate" />
     <clr-control-error *clrIfError="'min'">Value must be on or after min date</clr-control-error>
     <clr-control-error *clrIfError="'max'">Value must be on or before max date</clr-control-error>
   </clr-date-container>
   <clr-input-container>
     <label>Min Date</label>
-    <input type="text" [(ngModel)]="minDate" clrInput />
+    <input type="text" name="minDate" [(ngModel)]="minDate" clrInput />
   </clr-input-container>
   <clr-input-container>
     <label>Max Date</label>
-    <input type="text" [(ngModel)]="maxDate" clrInput />
+    <input type="text" name="maxDate" [(ngModel)]="maxDate" clrInput />
   </clr-input-container>
-</div>
+</form>
 
 <button class="btn" (click)="toggleMinDate()">{{ minDate ? 'Remove' : 'Add'}} Min</button>
 <button class="btn" (click)="toggleMaxDate()">{{ maxDate ? 'Remove' : 'Add'}} Max</button>

projects/demo/src/app/datepicker/datepicker-min-max.ts

@@ -5,6 +5,7 @@
  */
 
 import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'clr-datepicker-min-max-demo',
@@ -15,10 +16,11 @@ export class DatepickerMinMaxDemo {
   minDate = '2017-04-01';
   maxDate = '2017-04-30';
   model = '04/15/2017';
+  reactiveDateForm = new FormGroup({ date: new FormControl('04/15/2017') });
 
   toggleMaxDate() {
-    if (this.minDate) {
-      this.maxDate = '';
+    if (this.maxDate) {
+      this.maxDate = null;
     } else {
       this.maxDate = '2019-11-19';
     }