fix(datepicker): change min/max date error message (#3607)

Fixes #2922 BREAKING CHANGE: 'ngbDate' validator error messages were changed to be more explicit and aligned with Angular validators. For the following use-case `<ngb-datepicker [ngModel]="{year: 2019, month: 12, day: 31}" [minDate]="{year: 2020, month: 1, day: 1}"></ngb-datepicker>` form control errors are: Before ``` ngbDate: { requiredBefore: { year: 2020, month: 1, day: 1 } } ``` After ``` ngbDate: { minDate: { minDate: { year: 2020, month: 1, day: 1 }, actual: { year: 2019, month: 12, day: 31 } } ``` Same change is applied for `requiredAfter` and `maxDate`.
ng-bootstrap · Feb 21, 2020 · 501a1a0 · 501a1a0
1 parent 0841abe
commit 501a1a0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -463,7 +463,7 @@ describe('NgbInputDatepicker', () => {
            expect(form.control.getError('ngbDate', ['dp']).invalid).toBe(5);
          }));
 
-      it('should return "requiredBefore" errors for dates before minimal date', fakeAsync(() => {
+      it('should return "minDate" errors for dates before minimal date', fakeAsync(() => {
            const fixture = createTestCmpt(`<form>
           <input ngbDatepicker [ngModel]="{year: 2017, month: 04, day: 04}" [minDate]="{year: 2017, month: 6, day: 4}" name="dp">
         </form>`);
@@ -472,10 +472,11 @@ describe('NgbInputDatepicker', () => {
            fixture.detectChanges();
            tick();
            expect(form.control.invalid).toBeTruthy();
-           expect(form.control.getError('ngbDate', ['dp']).requiredBefore).toEqual({year: 2017, month: 6, day: 4});
+           expect(form.control.getError('ngbDate', ['dp']).minDate)
+               .toEqual({minDate: {year: 2017, month: 6, day: 4}, actual: {year: 2017, month: 4, day: 4}});
          }));
 
-      it('should return "requiredAfter" errors for dates after maximal date', fakeAsync(() => {
+      it('should return "maxDate" errors for dates after maximal date', fakeAsync(() => {
            const fixture = createTestCmpt(`<form>
           <input ngbDatepicker [ngModel]="{year: 2017, month: 04, day: 04}" [maxDate]="{year: 2017, month: 2, day: 4}" name="dp">
         </form>`);
@@ -484,7 +485,8 @@ describe('NgbInputDatepicker', () => {
            fixture.detectChanges();
            tick();
            expect(form.control.invalid).toBeTruthy();
-           expect(form.control.getError('ngbDate', ['dp']).requiredAfter).toEqual({year: 2017, month: 2, day: 4});
+           expect(form.control.getError('ngbDate', ['dp']).maxDate)
+               .toEqual({maxDate: {year: 2017, month: 2, day: 4}, actual: {year: 2017, month: 4, day: 4}});
          }));
 
       it('should update validity status when model changes', fakeAsync(() => {

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -289,7 +289,7 @@ export class NgbInputDatepicker implements OnChanges,
   setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
 
   validate(c: AbstractControl): {[key: string]: any} {
-    const value = c.value;
+    const {value} = c;
 
     if (value === null || value === undefined) {
       return null;
@@ -298,15 +298,15 @@ export class NgbInputDatepicker implements OnChanges,
     const ngbDate = this._fromDateStruct(this._dateAdapter.fromModel(value));
 
     if (!this._calendar.isValid(ngbDate)) {
-      return {'ngbDate': {invalid: c.value}};
+      return {'ngbDate': {invalid: value}};
     }
 
     if (this.minDate && ngbDate.before(NgbDate.from(this.minDate))) {
-      return {'ngbDate': {requiredBefore: this.minDate}};
+      return {'ngbDate': {minDate: {minDate: this.minDate, actual: value}}};
     }
 
     if (this.maxDate && ngbDate.after(NgbDate.from(this.maxDate))) {
-      return {'ngbDate': {requiredAfter: this.maxDate}};
+      return {'ngbDate': {maxDate: {maxDate: this.maxDate, actual: value}}};
     }
   }