Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit beb4308

Browse files
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 32 additions & 0 deletions
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月29日T17: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月29日T17: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)

AltStyle によって変換されたページ (->オリジナル) /