fix(material/datepicker): date range input not marked as required when using reactive forms (#26749)

Fixes that the date range input wasn't styled as being required when using the `required` reactive forms validator.

Fixes #26654.

Author: crisbeto

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<Date | null>(null),
+        end: new FormControl<Date | null>(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<Date | null>(null, Validators.required),
+      end: new FormControl<Date | null>(null),
+    });
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.rangeInput.required).toBe(true);
+  });
 });
 
 @Component({

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<D>
   /** 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<D>
       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);
+  }
 }