Skip to content

Commit beb4308

Browse files
committed
fix(input-directive): non-date input did not set ng-valid after model is set to valid date
fix #448 edge case for non-date input
1 parent 6193c38 commit beb4308

File tree

2 files changed

+33
-0
lines changed

2 files changed

+33
-0
lines changed

src/lib/dl-date-time-input/dl-date-time-input.directive.ts

+1
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@ export class DlDateTimeInputDirective<D> implements ControlValueAccessor, Valida
193193
* @internal
194194
*/
195195
writeValue(value: D): void {
196+
this._isValid = true;
196197
this.value = value;
197198
this._setElementValue(value);
198199
}

src/lib/dl-date-time-input/specs/dl-date-time-input.directive.spec.ts

+32
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,9 @@ describe('DlDateTimeInputDirective', () => {
211211
});
212212

213213
it('should remove ng-invalid when model is updated with valid date', fakeAsync(() => {
214+
// This is to fix #448, inputting a value that is a disallowed date (but a valid date)
215+
// should change to ng-valid when the model is updated to an allowed date.
216+
214217
const allowedValue = moment('2019-10-29T17:00').valueOf();
215218
spyOn(component, 'dateTimeFilter').and.callFake((date: number) => {
216219
return date === allowedValue;
@@ -233,6 +236,35 @@ describe('DlDateTimeInputDirective', () => {
233236
expect(inputElement.classList).toContain('ng-valid');
234237
}));
235238

239+
it('should add ng-invalid for non-date input and remove ng-invalid after when model is updated with valid date', fakeAsync(() => {
240+
// This is to fix #448, inputting a completely invalid date value (i.e not a date at all)
241+
// should change to ng-valid when the model is updated to an allowed date.
242+
243+
const allowedValue = moment('2019-10-29T17:00').valueOf();
244+
spyOn(component, 'dateTimeFilter').and.callFake((date: number) => {
245+
return date === allowedValue;
246+
});
247+
248+
const inputElement = debugElement.query(By.directive(DlDateTimeInputDirective)).nativeElement;
249+
inputElement.value = 'very-invalid-date';
250+
inputElement.dispatchEvent(new Event('input'));
251+
252+
fixture.detectChanges();
253+
254+
expect(inputElement.classList).toContain('ng-invalid');
255+
256+
inputElement.dispatchEvent(new Event('blur'));
257+
fixture.detectChanges();
258+
259+
component.dateValue = allowedValue;
260+
261+
fixture.detectChanges();
262+
tick();
263+
fixture.detectChanges();
264+
265+
expect(inputElement.classList).toContain('ng-valid');
266+
}));
267+
236268
it('should disable input when setDisabled is called', () => {
237269
const inputElement = debugElement.query(By.directive(DlDateTimeInputDirective)).nativeElement;
238270
expect(inputElement.disabled).toBe(false);

0 commit comments

Comments
 (0)