Skip to content

Commit deadb67

Browse files
lleknpkozlowski-opensource
authored andcommitted
fix(datepicker): propagate "touched" property
Closes #918 Closes #924
1 parent 94a4d5c commit deadb67

File tree

2 files changed

+33
-1
lines changed

2 files changed

+33
-1
lines changed

src/datepicker/datepicker-input.spec.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,37 @@ describe('NgbInputDatepicker', () => {
111111
expect(input.disabled).toBeFalsy();
112112
expect(buttonInDatePicker.disabled).toBeFalsy();
113113
}));
114+
115+
it('should propagate touched state on (blur)', fakeAsync(() => {
116+
const fixture = createTestCmpt(`<input ngbDatepicker [(ngModel)]="date">`);
117+
const inputDebugEl = fixture.debugElement.query(By.css('input'));
118+
119+
expect(inputDebugEl.classes['ng-touched']).toBeFalsy();
120+
121+
inputDebugEl.triggerEventHandler('blur', {});
122+
tick();
123+
fixture.detectChanges();
124+
125+
expect(inputDebugEl.classes['ng-touched']).toBeTruthy();
126+
}));
127+
128+
it('should propagate touched state when setting a date', fakeAsync(() => {
129+
const fixture = createTestCmpt(`
130+
<input ngbDatepicker [(ngModel)]="date" #d="ngbDatepicker">
131+
<button (click)="open(d)">Open</button>`);
132+
133+
const buttonDebugEl = fixture.debugElement.query(By.css('button'));
134+
const inputDebugEl = fixture.debugElement.query(By.css('input'));
135+
136+
expect(inputDebugEl.classes['ng-touched']).toBeFalsy();
137+
138+
buttonDebugEl.triggerEventHandler('click', {}); // open
139+
inputDebugEl.triggerEventHandler('change', {target: {value: '2016-09-10'}});
140+
tick();
141+
fixture.detectChanges();
142+
143+
expect(inputDebugEl.classes['ng-touched']).toBeTruthy();
144+
}));
114145
});
115146

116147
describe('options', () => {

src/datepicker/datepicker-input.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const NGB_DATEPICKER_VALUE_ACCESSOR = {
3333
@Directive({
3434
selector: 'input[ngbDatepicker]',
3535
exportAs: 'ngbDatepicker',
36-
host: {'(change)': 'manualDateChange($event.target.value)', '(keyup.esc)': 'close()'},
36+
host: {'(change)': 'manualDateChange($event.target.value)', '(keyup.esc)': 'close()', '(blur)': '_onTouched()'},
3737
providers: [NGB_DATEPICKER_VALUE_ACCESSOR]
3838
})
3939
export class NgbInputDatepicker implements ControlValueAccessor {
@@ -204,6 +204,7 @@ export class NgbInputDatepicker implements ControlValueAccessor {
204204
this._renderer.setElementProperty(this._elRef.nativeElement, 'value', this._parserFormatter.format(model));
205205
if (this.isOpen()) {
206206
this._cRef.instance.writeValue(model);
207+
this._onTouched();
207208
}
208209
}
209210
}

0 commit comments

Comments
 (0)