fix(components/datetime): date range picker visually invalid on custo…

…m errors (#2910)

apps/playground/src/app/components/datetime/date-range-picker/date-range-picker.component.html

@@ -8,7 +8,14 @@
     [calculatorIds]="calculatorIds"
     [dateFormat]="dateFormat"
     [hintText]="hintText"
-  />
+  >
+    @if (lastDonationControl.errors?.['dateWeekend']) {
+      <sky-form-error
+        errorName="dateWeekend"
+        errorText="Do not pick a weekend."
+      />
+    }
+  </sky-date-range-picker>
 
   <button class="sky-btn sky-btn-default" type="submit">Submit</button>
 </form>

apps/playground/src/app/components/datetime/date-range-picker/date-range-picker.component.ts

@@ -1,10 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import {
+  AbstractControl,
   FormBuilder,
   FormControl,
   FormsModule,
   ReactiveFormsModule,
+  ValidationErrors,
   Validators,
 } from '@angular/forms';
 import {
@@ -16,6 +18,25 @@ import { SkyAppLocaleProvider } from '@skyux/i18n';
 
 import { LocaleProvider } from './locale-provider';
 
+function dateRangeExcludesWeekend(
+  control: AbstractControl,
+): ValidationErrors | null {
+  const startDate = control.value.startDate;
+  const endDate = control.value.endDate;
+
+  const isWeekend = (value: unknown): boolean => {
+    return (
+      value instanceof Date && (value.getDay() === 6 || value.getDay() === 0)
+    );
+  };
+
+  if (isWeekend(startDate) || isWeekend(endDate)) {
+    return { dateWeekend: true };
+  }
+
+  return null;
+}
+
 @Component({
   imports: [
     CommonModule,
@@ -37,9 +58,9 @@ export class DateRangePickerComponent {
   protected calculatorIds: SkyDateRangeCalculatorId[] | undefined;
   protected dateFormat: string | undefined;
   protected hintText: string | undefined;
-  protected lastDonationControl = new FormControl<SkyDateRangeCalculation>({
-    calculatorId: SkyDateRangeCalculatorId.Today,
-  });
+  protected lastDonationControl = new FormControl<
+    SkyDateRangeCalculation | string
+  >('', [dateRangeExcludesWeekend]);
 
   protected formGroup = inject(FormBuilder).group({
     lastDonation: this.lastDonationControl,

libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.spec.ts

@@ -876,6 +876,69 @@ describe('Date range picker', function () {
     });
   });
 
+  it('should not mark calculator as invalid when the error is from the datepicker', fakeAsync(() => {
+    detectChanges();
+    selectCalculator(SkyDateRangeCalculatorId.SpecificRange);
+    const control = component.dateRange;
+    control?.markAllAsTouched();
+    detectChanges();
+
+    const calculatorInput = fixture.nativeElement.querySelector(
+      '.sky-date-range-picker-select-calculator .sky-input-box-input-group-inner',
+    );
+    const startInput: HTMLElement = fixture.nativeElement.querySelector(
+      '.sky-date-range-picker-start-date .sky-input-box-input-group-inner',
+    );
+
+    expect(
+      startInput.classList.contains('sky-field-status-invalid'),
+    ).toBeTrue();
+    expect(
+      calculatorInput.classList.contains('sky-field-status-invalid'),
+    ).toBeFalse();
+
+    const selectedValue: SkyDateRangeCalculation = {
+      calculatorId: SkyDateRangeCalculatorId.SpecificRange,
+      startDate: new Date('1/1/2000'),
+      endDate: new Date('1/2/1997'),
+    };
+
+    control?.setValue(selectedValue);
+
+    detectChanges();
+
+    expect(
+      startInput.classList.contains('sky-field-status-invalid'),
+    ).toBeTrue();
+    expect(
+      calculatorInput.classList.contains('sky-field-status-invalid'),
+    ).toBeTrue();
+  }));
+
+  it('should display custom form errors and mark all inputs as invalid', fakeAsync(() => {
+    detectChanges();
+    selectCalculator(SkyDateRangeCalculatorId.SpecificRange);
+    detectChanges();
+    const control = component.dateRange;
+    control?.setErrors({
+      customError: true,
+    });
+    control?.markAllAsTouched();
+    detectChanges();
+
+    const inputs: HTMLElement[] = fixture.nativeElement.querySelectorAll(
+      '.sky-input-box-input-group-inner',
+    );
+
+    inputs.forEach((input) => {
+      expect(input.classList.contains('sky-field-status-invalid')).toBeTrue();
+    });
+
+    expect(
+      fixture.nativeElement.querySelector('sky-form-error')?.textContent.trim(),
+    ).toBe('Error: This is a custom error.');
+  }));
+
   describe('accessibility', () => {
     function verifyFormFieldsRequired(expectation: boolean): void {
       const inputBoxes =

libs/components/datetime/src/lib/modules/date-range-picker/date-range-picker.component.ts

@@ -12,6 +12,7 @@ import {
   booleanAttribute,
   computed,
   inject,
+  runInInjectionContext,
   signal,
 } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
@@ -280,6 +281,7 @@ export class SkyDateRangePickerComponent
   #startDateControl = new FormControl<DateValue>(this.#getValue().startDate);
   #startDateInvalid = this.#createStatusChangeSignal(this.#startDateControl);
   #startDateTouched = this.#createTouchedChangeSignal(this.#startDateControl);
+  #hostHasCustomError: Signal<boolean | undefined> | undefined;
 
   protected formGroup = inject(FormBuilder).group({
     calculatorId: this.#calculatorIdControl,
@@ -289,8 +291,7 @@ export class SkyDateRangePickerComponent
 
   protected readonly calculatorIdHasErrors = computed(() => {
     const touched = this.#calculatorIdTouched();
-    const invalid = this.#calculatorIdInvalid();
-
+    const invalid = this.#calculatorIdInvalid() || this.#hostHasCustomError?.();
     return touched && invalid;
   });
 
@@ -320,6 +321,14 @@ export class SkyDateRangePickerComponent
       self: true,
     })?.control;
 
+    runInInjectionContext(this.#injector, () => {
+      if (this.hostControl) {
+        this.#hostHasCustomError = this.#createHostCustomErrorChangeSignal(
+          this.hostControl,
+        );
+      }
+    });
+
     // Set a default value on the control if it's undefined on init.
     // We need to use setTimeout to avoid interfering with the first
     // validation cycle.
@@ -554,6 +563,24 @@ export class SkyDateRangePickerComponent
     this.showStartDatePicker.set(showStartDatePicker);
   }
 
+  #createHostCustomErrorChangeSignal(
+    control: AbstractControl,
+  ): Signal<boolean | undefined> {
+    return toSignal(
+      control.events.pipe(
+        filter((evt) => evt instanceof StatusChangeEvent),
+        map((evt: StatusChangeEvent) => {
+          const errors = evt.source.errors ?? [];
+          const knownErrors = ['required', 'skyDate'];
+
+          return Object.keys(errors).some((error) => {
+            return !knownErrors.includes(error);
+          });
+        }),
+      ),
+    );
+  }
+
   #createStatusChangeSignal(control: FormControl): Signal<boolean | undefined> {
     return toSignal(
       control.events.pipe(

libs/components/datetime/src/lib/modules/date-range-picker/fixtures/date-range-picker.component.fixture.html

@@ -12,7 +12,14 @@
     [labelText]="labelText"
     [required]="required"
     [stacked]="stacked"
-  />
+  >
+    @if (dateRange?.errors?.['customError']) {
+    <sky-form-error
+      errorName="customError"
+      errorText="This is a custom error."
+    />
+    }
+  </sky-date-range-picker>
   }
 </form>