diff --git a/src/material/slider/slider-input.ts b/src/material/slider/slider-input.ts index bbf72df06bea..5631c1992a99 100644 --- a/src/material/slider/slider-input.ts +++ b/src/material/slider/slider-input.ts @@ -96,6 +96,9 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA return numberAttribute(this._hostElement.value, 0); } set value(value: number) { + if (value === null) { + value = this._getDefaultValue(); + } value = isNaN(value) ? 0 : value; const stringValue = value + ''; if (!this._hasSetInitialValue) { diff --git a/src/material/slider/slider.spec.ts b/src/material/slider/slider.spec.ts index 6917b2df471e..fd85c30fd19b 100644 --- a/src/material/slider/slider.spec.ts +++ b/src/material/slider/slider.spec.ts @@ -18,7 +18,7 @@ import { tick, waitForAsync, } from '@angular/core/testing'; -import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {By} from '@angular/platform-browser'; import {of} from 'rxjs'; import {MatSliderModule} from './module'; @@ -1314,6 +1314,25 @@ describe('MatSlider', () => { })); }); + describe('slider with form group', () => { + it('should reset to initial min-max value when form reset is done', fakeAsync(() => { + const fixture = createComponent(SliderWithFormGroup); + fixture.detectChanges(); + const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); + const slider = sliderDebugElement.componentInstance; + const minInput = slider._getInput(_MatThumb.START) as MatSliderRangeThumb; + const maxInput = slider._getInput(_MatThumb.END) as MatSliderRangeThumb; + flush(); + + expect(minInput.value).toBe(0); + expect(maxInput.value).toBe(10); + slideToValue(slider, minInput, 20); + fixture.componentInstance.fg.reset(); + expect(minInput.value).toBe(0); + expect(maxInput.value).toBe(10); + })); + }); + describe('slider as a custom form control', () => { let fixture: ComponentFixture; let slider: MatSlider; @@ -2024,6 +2043,28 @@ class RangeSliderWithTickMarks { @ViewChild(MatSlider) slider: MatSlider; } +@Component({ + template: ` +
+ + + + +
+ `, + styles: SLIDER_STYLES, + standalone: false, +}) +class SliderWithFormGroup { + readonly MIN = 0; + readonly MAX = 10; + + readonly fg = new FormGroup({ + min: new FormControl(null), + max: new FormControl(null), + }); +} + /** Clicks on the MatSlider at the coordinates corresponding to the given value. */ function setValueByClick( slider: MatSlider, diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts index a1c626fc784b..423267910983 100644 --- a/src/material/slider/slider.ts +++ b/src/material/slider/slider.ts @@ -140,7 +140,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider { return this._min; } set min(v: number) { - const min = isNaN(v) ? this._min : v; + const min = v === undefined || v === null || isNaN(v) ? this._min : v; if (this._min !== min) { this._updateMin(min); } @@ -216,7 +216,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider { return this._max; } set max(v: number) { - const max = isNaN(v) ? this._max : v; + const max = v === undefined || v === null || isNaN(v) ? this._max : v; if (this._max !== max) { this._updateMax(max); }