Fix validation to fire for user input

package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.46.1",
+    "@blackbaud/skyux": "2.48.1",
     "@blackbaud/skyux-builder": "1.33.1",
     "@skyux-sdk/builder-plugin-skyux": "1.0.0"
   }

src/app/public/modules/date-range-picker/date-range-picker.component.spec.ts

@@ -425,6 +425,52 @@ describe('Date range picker', function () {
     });
   }));
 
+  it('should error when end date comes before start date', fakeAsync(function () {
+    detectChanges();
+
+    const control = component.dateRange;
+    const calculatorIdControl = component.dateRangePicker.formGroup.get('calculatorId');
+
+    control.setValue({
+      calculatorId: SkyDateRangeCalculatorId.SpecificRange
+    });
+
+    detectChanges();
+
+    expect(control.errors).toBeFalsy();
+    expect(calculatorIdControl.errors).toBeFalsy();
+
+    const datepickerInputs = fixture.nativeElement.querySelectorAll('.sky-datepicker input');
+
+    datepickerInputs.item(0).value = '1/2/2000';
+    datepickerInputs.item(1).value = '1/1/2000';
+
+    SkyAppTestUtility.fireDomEvent(datepickerInputs.item(0), 'change');
+    SkyAppTestUtility.fireDomEvent(datepickerInputs.item(1), 'change');
+
+    detectChanges();
+
+    const expectedError = {
+      skyDateRange: {
+        calculatorId: SkyDateRangeCalculatorId.SpecificRange,
+        errors: {
+          endDateBeforeStartDate: true
+        }
+      }
+    };
+
+    expect(control.errors).toEqual(expectedError);
+    expect(calculatorIdControl.errors).toEqual(expectedError);
+
+    datepickerInputs.item(1).value = '1/3/2000';
+    SkyAppTestUtility.fireDomEvent(datepickerInputs.item(1), 'change');
+
+    detectChanges();
+
+    expect(control.errors).toBeFalsy();
+    expect(calculatorIdControl.errors).toBeFalsy();
+  }));
+
   it('should be accessible', async(function () {
     fixture.detectChanges();
 

src/app/public/modules/date-range-picker/date-range-picker.component.ts

@@ -233,7 +233,7 @@ export class SkyDateRangePickerComponent
     this.updateCalculators().then(() => {
       this.isReady = true;
 
-      this.resetFormState();
+      this.resetFormGroupValue();
       this.showRelevantFormFields();
 
       // Fill in any unprovided values after the calculators have been initialized.
@@ -275,7 +275,7 @@ export class SkyDateRangePickerComponent
         if (!found) {
           const newValue = this.defaultCalculator.getValue();
           this.setValue(newValue);
-          this.resetFormState(newValue);
+          this.resetFormGroupValue(newValue);
           this.showRelevantFormFields();
         }
       });
@@ -307,7 +307,7 @@ export class SkyDateRangePickerComponent
         this.onChange(this.defaultValue);
       }
 
-      this.resetFormState();
+      this.resetFormGroupValue();
       this.showRelevantFormFields();
     }
   }
@@ -339,6 +339,9 @@ export class SkyDateRangePickerComponent
     }
 
     if (!errors) {
+      // Clear any errors on the calculator select.
+      // tslint:disable-next-line:no-null-keyword
+      idControl.setErrors(null);
       return;
     }
 
@@ -431,19 +434,7 @@ export class SkyDateRangePickerComponent
     this.changeDetector.markForCheck();
   }
 
-  private resetFormState(value?: SkyDateRangeCalculation): void {
-
-    // Clear any errors first.
-    /* tslint:disable:no-null-keyword */
-    this.control.setErrors(null, {
-      emitEvent: false
-    });
-
-    this.formGroup.setErrors(null, {
-      emitEvent: false
-    });
-    /* tslint:enable */
-
+  private resetFormGroupValue(value?: SkyDateRangeCalculation): void {
     // Do not emit a value change event on the underlying form group
     // because we're already watching for changes that are triggered by the end user.
     // For example, if we change the value of the form group internally, we don't want the event
@@ -484,7 +475,7 @@ export class SkyDateRangePickerComponent
         const newValue = calculator.getValue();
 
         this.setValue(newValue);
-        this.resetFormState(newValue);
+        this.resetFormGroupValue(newValue);
         this.showRelevantFormFields();
       });
 
@@ -494,7 +485,6 @@ export class SkyDateRangePickerComponent
       .takeUntil(this.ngUnsubscribe)
       .subscribe((startDate) => {
         this.patchValue({ startDate });
-        this.resetFormState();
       });
 
     // Watch for end date value changes.
@@ -503,7 +493,6 @@ export class SkyDateRangePickerComponent
       .takeUntil(this.ngUnsubscribe)
       .subscribe((endDate) => {
         this.patchValue({ endDate });
-        this.resetFormState();
       });
   }
 

src/app/public/modules/date-range-picker/types/date-range-calculator-id.ts

@@ -1,4 +1,4 @@
-export const enum SkyDateRangeCalculatorId {
+export enum SkyDateRangeCalculatorId {
   AnyTime,
   Before,
   After,

src/app/public/modules/date-range-picker/types/date-range-calculator-type.ts

@@ -1,4 +1,4 @@
-export const enum SkyDateRangeCalculatorType {
+export enum SkyDateRangeCalculatorType {
   After,
   Before,
   Range,