diff --git a/src/material/datepicker/date-range-input-parts.ts b/src/material/datepicker/date-range-input-parts.ts index 62c2b810088c..9371ade07dee 100644 --- a/src/material/datepicker/date-range-input-parts.ts +++ b/src/material/datepicker/date-range-input-parts.ts @@ -190,8 +190,8 @@ abstract class MatDateRangeInputPartBase return source !== this._rangeInput._startInput && source !== this._rangeInput._endInput; } - protected override _assignValueProgrammatically(value: D | null, reformat: boolean) { - super._assignValueProgrammatically(value, reformat); + protected override _assignValueProgrammatically(value: D | null) { + super._assignValueProgrammatically(value); const opposite = ( this === (this._rangeInput._startInput as MatDateRangeInputPartBase) ? this._rangeInput._endInput diff --git a/src/material/datepicker/datepicker-input-base.ts b/src/material/datepicker/datepicker-input-base.ts index 6b7d90a12007..9463fc8e5caa 100644 --- a/src/material/datepicker/datepicker-input-base.ts +++ b/src/material/datepicker/datepicker-input-base.ts @@ -94,7 +94,7 @@ export abstract class MatDatepickerInputBase | undefined; @@ -257,7 +257,7 @@ export abstract class MatDatepickerInputBase { - this._assignValueProgrammatically(this.value, true); + this._assignValueProgrammatically(this.value); }); } @@ -289,10 +289,7 @@ export abstract class MatDatepickerInputBase { expect(formControl.hasError('matDatepickerParse')).toBe(true); }); - it('should not re-format the input value if the forms module re-assigns the same date', () => { + it('should clear an invalid value when the control is reset', () => { const input = fixture.nativeElement.querySelector('input'); - const date = new Date(2017, JAN, 1); - testComponent.formControl.setValue(date); - fixture.detectChanges(); - expect(input.value).toContain('2017'); - - // Note: this isn't how users would behave, but it captures - // the sequence of events with signal forms. - input.value = 'foo'; - testComponent.formControl.setValue(date); + typeInElement(input, 'foo'); fixture.detectChanges(); - + expect(testComponent.formControl.value).toBeNull(); expect(input.value).toBe('foo'); - }); - - it('should not re-format the input value if the forms module re-assigns null', () => { - const input = fixture.nativeElement.querySelector('input'); - testComponent.formControl.setValue(null); - fixture.detectChanges(); - expect(input.value).toBe(''); - // Note: this isn't how users would behave, but it captures - // the sequence of events with signal forms. - input.value = 'foo'; - testComponent.formControl.setValue(null); + testComponent.formControl.reset(); fixture.detectChanges(); - expect(input.value).toBe('foo'); + expect(input.value).toBe(''); + expect(testComponent.formControl.hasError('matDatepickerParse')).toBe(false); }); }); @@ -1130,6 +1113,33 @@ describe('MatDatepicker', () => { expect(hasParseError()).toBe(true); }); + it('should not clear an invalid value while the user is typing', () => { + typeInElement(input, 'foo'); + fixture.detectChanges(); + + expect(input.value).toBe('foo'); + expect(fixture.componentInstance.dateForm().value()).toBeNull(); + }); + + it('should not re-format a valid value while the user is typing', () => { + typeInElement(input, '01/01/2017'); + fixture.detectChanges(); + + expect(input.value).toBe('01/01/2017'); + expect(fixture.componentInstance.dateForm().value()).toEqual(new Date(2017, JAN, 1)); + }); + + it('should clear an invalid value when the form is reset', () => { + typeInElement(input, 'foo'); + fixture.detectChanges(); + expect(input.value).toBe('foo'); + + fixture.componentInstance.dateForm().reset(); + fixture.detectChanges(); + + expect(input.value).toBe(''); + }); + it('should clear the matDatepickerParse error when an invalid value is erased', () => { fixture.componentInstance.dateForm().value.set(new Date(2017, JAN, 1)); fixture.detectChanges();