fix(datepicker): propagate "touched" property

Closes #918 Closes #924
ng-bootstrap · Oct 20, 2016 · deadb67 · deadb67
1 parent 94a4d5c
commit deadb67
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -111,6 +111,37 @@ describe('NgbInputDatepicker', () => {
          expect(input.disabled).toBeFalsy();
          expect(buttonInDatePicker.disabled).toBeFalsy();
        }));
+
+    it('should propagate touched state on (blur)', fakeAsync(() => {
+         const fixture = createTestCmpt(`<input ngbDatepicker [(ngModel)]="date">`);
+         const inputDebugEl = fixture.debugElement.query(By.css('input'));
+
+         expect(inputDebugEl.classes['ng-touched']).toBeFalsy();
+
+         inputDebugEl.triggerEventHandler('blur', {});
+         tick();
+         fixture.detectChanges();
+
+         expect(inputDebugEl.classes['ng-touched']).toBeTruthy();
+       }));
+
+    it('should propagate touched state when setting a date', fakeAsync(() => {
+         const fixture = createTestCmpt(`
+      <input ngbDatepicker [(ngModel)]="date" #d="ngbDatepicker">
+      <button (click)="open(d)">Open</button>`);
+
+         const buttonDebugEl = fixture.debugElement.query(By.css('button'));
+         const inputDebugEl = fixture.debugElement.query(By.css('input'));
+
+         expect(inputDebugEl.classes['ng-touched']).toBeFalsy();
+
+         buttonDebugEl.triggerEventHandler('click', {});  // open
+         inputDebugEl.triggerEventHandler('change', {target: {value: '2016-09-10'}});
+         tick();
+         fixture.detectChanges();
+
+         expect(inputDebugEl.classes['ng-touched']).toBeTruthy();
+       }));
   });
 
   describe('options', () => {

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -33,7 +33,7 @@ const NGB_DATEPICKER_VALUE_ACCESSOR = {
 @Directive({
   selector: 'input[ngbDatepicker]',
   exportAs: 'ngbDatepicker',
-  host: {'(change)': 'manualDateChange($event.target.value)', '(keyup.esc)': 'close()'},
+  host: {'(change)': 'manualDateChange($event.target.value)', '(keyup.esc)': 'close()', '(blur)': '_onTouched()'},
   providers: [NGB_DATEPICKER_VALUE_ACCESSOR]
 })
 export class NgbInputDatepicker implements ControlValueAccessor {
@@ -204,6 +204,7 @@ export class NgbInputDatepicker implements ControlValueAccessor {
     this._renderer.setElementProperty(this._elRef.nativeElement, 'value', this._parserFormatter.format(model));
     if (this.isOpen()) {
       this._cRef.instance.writeValue(model);
+      this._onTouched();
     }
   }
 }