fix(material/datepicker): unable to pass in errorStateMatcher through…

… binding on range input (#21210)

Fixes that the `errorStateMatcher` on the date range inputs wasn't marked as an
`Input` which made it impossible to change.

Fixes #21205.

(cherry picked from commit 8f0e654)

src/material/datepicker/date-range-input-parts.ts

@@ -198,7 +198,8 @@ const _MatDateRangeInputBase:
   ],
   // These need to be specified explicitly, because some tooling doesn't
   // seem to pick them up from the base class. See #20932.
-  outputs: ['dateChange', 'dateInput']
+  outputs: ['dateChange', 'dateInput'],
+  inputs: ['errorStateMatcher']
 })
 export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements
     CanUpdateErrorState, DoCheck, OnInit {
@@ -307,7 +308,8 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements
   ],
   // These need to be specified explicitly, because some tooling doesn't
   // seem to pick them up from the base class. See #20932.
-  outputs: ['dateChange', 'dateInput']
+  outputs: ['dateChange', 'dateInput'],
+  inputs: ['errorStateMatcher']
 })
 export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
     CanUpdateErrorState, DoCheck, OnInit {

src/material/datepicker/date-range-input.spec.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {OverlayContainer} from '@angular/cdk/overlay';
-import {MatNativeDateModule} from '@angular/material/core';
+import {ErrorStateMatcher, MatNativeDateModule} from '@angular/material/core';
 import {MatDatepickerModule} from './datepicker-module';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -759,6 +759,15 @@ describe('MatDateRangeInput', () => {
     subscription.unsubscribe();
   });
 
+  it('should be able to pass in a different error state matcher through an input', () => {
+    const fixture = createComponent(RangePickerErrorStateMatcher);
+    fixture.detectChanges();
+    const {startInput, endInput, matcher} = fixture.componentInstance;
+
+    expect(startInput.errorStateMatcher).toBe(matcher);
+    expect(endInput.errorStateMatcher).toBe(matcher);
+  });
+
 });
 
 @Component({
@@ -903,3 +912,22 @@ class RangePickerWithCustomValidator {
   min: Date;
   max: Date;
 }
+
+
+@Component({
+  template: `
+    <mat-form-field>
+      <mat-date-range-input [rangePicker]="rangePicker">
+        <input matStartDate [errorStateMatcher]="matcher"/>
+        <input matEndDate [errorStateMatcher]="matcher"/>
+      </mat-date-range-input>
+
+      <mat-date-range-picker #rangePicker></mat-date-range-picker>
+    </mat-form-field>
+  `
+})
+class RangePickerErrorStateMatcher {
+  @ViewChild(MatStartDate) startInput: MatStartDate<Date>;
+  @ViewChild(MatEndDate) endInput: MatEndDate<Date>;
+  matcher: ErrorStateMatcher = {isErrorState: () => false};
+}

tools/public_api_guard/material/datepicker.d.ts

@@ -381,7 +381,7 @@ export declare class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
     ngDoCheck(): void;
     ngOnInit(): void;
     static ngAcceptInputType_disabled: BooleanInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatEndDate<any>, "input[matEndDate]", never, {}, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatEndDate<any>, "input[matEndDate]", never, { "errorStateMatcher": "errorStateMatcher"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatEndDate<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
 }
 
@@ -492,7 +492,7 @@ export declare class MatStartDate<D> extends _MatDateRangeInputBase<D> implement
     ngDoCheck(): void;
     ngOnInit(): void;
     static ngAcceptInputType_disabled: BooleanInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatStartDate<any>, "input[matStartDate]", never, {}, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatStartDate<any>, "input[matStartDate]", never, { "errorStateMatcher": "errorStateMatcher"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatStartDate<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
 }