diff --git a/src/material/datepicker/date-range-input-parts.ts b/src/material/datepicker/date-range-input-parts.ts index b18484d87382..d7f6866c14c7 100644 --- a/src/material/datepicker/date-range-input-parts.ts +++ b/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 extends _MatDateRangeInputBase implements CanUpdateErrorState, DoCheck, OnInit { @@ -307,7 +308,8 @@ export class MatStartDate extends _MatDateRangeInputBase 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 extends _MatDateRangeInputBase implements CanUpdateErrorState, DoCheck, OnInit { diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts index 33b12f796137..b713d6ec8b0d 100644 --- a/src/material/datepicker/date-range-input.spec.ts +++ b/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: ` + + + + + + + + + ` +}) +class RangePickerErrorStateMatcher { + @ViewChild(MatStartDate) startInput: MatStartDate; + @ViewChild(MatEndDate) endInput: MatEndDate; + matcher: ErrorStateMatcher = {isErrorState: () => false}; +} diff --git a/tools/public_api_guard/material/datepicker.d.ts b/tools/public_api_guard/material/datepicker.d.ts index d0d94f8a916c..1d1a747ba9bc 100644 --- a/tools/public_api_guard/material/datepicker.d.ts +++ b/tools/public_api_guard/material/datepicker.d.ts @@ -381,7 +381,7 @@ export declare class MatEndDate extends _MatDateRangeInputBase implements ngDoCheck(): void; ngOnInit(): void; static ngAcceptInputType_disabled: BooleanInput; - static ɵdir: i0.ɵɵDirectiveDefWithMeta, "input[matEndDate]", never, {}, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>; + static ɵdir: i0.ɵɵDirectiveDefWithMeta, "input[matEndDate]", never, { "errorStateMatcher": "errorStateMatcher"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>; static ɵfac: i0.ɵɵFactoryDef, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>; } @@ -492,7 +492,7 @@ export declare class MatStartDate extends _MatDateRangeInputBase implement ngDoCheck(): void; ngOnInit(): void; static ngAcceptInputType_disabled: BooleanInput; - static ɵdir: i0.ɵɵDirectiveDefWithMeta, "input[matStartDate]", never, {}, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>; + static ɵdir: i0.ɵɵDirectiveDefWithMeta, "input[matStartDate]", never, { "errorStateMatcher": "errorStateMatcher"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>; static ɵfac: i0.ɵɵFactoryDef, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>; }