diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts index 2bef6dad2c5c..53709f048f23 100644 --- a/src/material/datepicker/date-range-input.spec.ts +++ b/src/material/datepicker/date-range-input.spec.ts @@ -8,6 +8,7 @@ import { NG_VALIDATORS, Validator, NgModel, + Validators, } from '@angular/forms'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Directionality} from '@angular/cdk/bidi'; @@ -1111,6 +1112,31 @@ describe('MatDateRangeInput', () => { .withContext('End date set three times') .toBe(3); })); + + it('should mark the range picker as required when the entire group has the required validator', () => { + const fixture = createComponent(StandardRangePicker); + fixture.componentInstance.range = new FormGroup( + { + start: new FormControl(null), + end: new FormControl(null), + }, + Validators.required, + ); + fixture.detectChanges(); + + expect(fixture.componentInstance.rangeInput.required).toBe(true); + }); + + it('should mark the range picker as required when one part is required', () => { + const fixture = createComponent(StandardRangePicker); + fixture.componentInstance.range = new FormGroup({ + start: new FormControl(null, Validators.required), + end: new FormControl(null), + }); + fixture.detectChanges(); + + expect(fixture.componentInstance.rangeInput.required).toBe(true); + }); }); @Component({ diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts index b091b3f0de58..5d5403609426 100644 --- a/src/material/datepicker/date-range-input.ts +++ b/src/material/datepicker/date-range-input.ts @@ -24,7 +24,7 @@ import { } from '@angular/core'; import {MatFormFieldControl, MAT_FORM_FIELD} from '@angular/material/form-field'; import {ThemePalette, DateAdapter} from '@angular/material/core'; -import {NgControl, ControlContainer} from '@angular/forms'; +import {NgControl, ControlContainer, Validators} from '@angular/forms'; import {Subject, merge, Subscription} from 'rxjs'; import {FocusOrigin} from '@angular/cdk/a11y'; import {coerceBooleanProperty, BooleanInput} from '@angular/cdk/coercion'; @@ -130,12 +130,18 @@ export class MatDateRangeInput /** Whether the input is required. */ @Input() get required(): boolean { - return !!this._required; + return ( + this._required ?? + (this._isTargetRequired(this) || + this._isTargetRequired(this._startInput) || + this._isTargetRequired(this._endInput)) ?? + false + ); } set required(value: BooleanInput) { this._required = coerceBooleanProperty(value); } - private _required: boolean; + private _required: boolean | undefined; /** Function that can be used to filter out dates within the date range picker. */ @Input() @@ -422,4 +428,9 @@ export class MatDateRangeInput this._endInput._registerModel(model); } } + + /** Checks whether a specific range input directive is required. */ + private _isTargetRequired(target: {ngControl: NgControl | null} | null): boolean | undefined { + return target?.ngControl?.control?.hasValidator(Validators.required); + } }