Skip to content

Commit 421a849

Browse files
crisbetoannieyw
crisbeto
authored and
annieyw
committed
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)
1 parent 612cdc1 commit 421a849

3 files changed

Lines changed: 35 additions & 5 deletions

File tree

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,8 @@ const _MatDateRangeInputBase:
198198
],
199199
// These need to be specified explicitly, because some tooling doesn't
200200
// seem to pick them up from the base class. See #20932.
201-
outputs: ['dateChange', 'dateInput']
201+
outputs: ['dateChange', 'dateInput'],
202+
inputs: ['errorStateMatcher']
202203
})
203204
export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements
204205
CanUpdateErrorState, DoCheck, OnInit {
@@ -307,7 +308,8 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements
307308
],
308309
// These need to be specified explicitly, because some tooling doesn't
309310
// seem to pick them up from the base class. See #20932.
310-
outputs: ['dateChange', 'dateInput']
311+
outputs: ['dateChange', 'dateInput'],
312+
inputs: ['errorStateMatcher']
311313
})
312314
export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
313315
CanUpdateErrorState, DoCheck, OnInit {

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@angular/forms';
1111
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
1212
import {OverlayContainer} from '@angular/cdk/overlay';
13-
import {MatNativeDateModule} from '@angular/material/core';
13+
import {ErrorStateMatcher, MatNativeDateModule} from '@angular/material/core';
1414
import {MatDatepickerModule} from './datepicker-module';
1515
import {MatFormFieldModule} from '@angular/material/form-field';
1616
import {MatInputModule} from '@angular/material/input';
@@ -759,6 +759,15 @@ describe('MatDateRangeInput', () => {
759759
subscription.unsubscribe();
760760
});
761761

762+
it('should be able to pass in a different error state matcher through an input', () => {
763+
const fixture = createComponent(RangePickerErrorStateMatcher);
764+
fixture.detectChanges();
765+
const {startInput, endInput, matcher} = fixture.componentInstance;
766+
767+
expect(startInput.errorStateMatcher).toBe(matcher);
768+
expect(endInput.errorStateMatcher).toBe(matcher);
769+
});
770+
762771
});
763772

764773
@Component({
@@ -903,3 +912,22 @@ class RangePickerWithCustomValidator {
903912
min: Date;
904913
max: Date;
905914
}
915+
916+
917+
@Component({
918+
template: `
919+
<mat-form-field>
920+
<mat-date-range-input [rangePicker]="rangePicker">
921+
<input matStartDate [errorStateMatcher]="matcher"/>
922+
<input matEndDate [errorStateMatcher]="matcher"/>
923+
</mat-date-range-input>
924+
925+
<mat-date-range-picker #rangePicker></mat-date-range-picker>
926+
</mat-form-field>
927+
`
928+
})
929+
class RangePickerErrorStateMatcher {
930+
@ViewChild(MatStartDate) startInput: MatStartDate<Date>;
931+
@ViewChild(MatEndDate) endInput: MatEndDate<Date>;
932+
matcher: ErrorStateMatcher = {isErrorState: () => false};
933+
}

‎tools/public_api_guard/material/datepicker.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,7 @@ export declare class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
381381
ngDoCheck(): void;
382382
ngOnInit(): void;
383383
static ngAcceptInputType_disabled: BooleanInput;
384-
static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatEndDate<any>, "input[matEndDate]", never, {}, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
384+
static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatEndDate<any>, "input[matEndDate]", never, { "errorStateMatcher": "errorStateMatcher"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
385385
static ɵfac: i0.ɵɵFactoryDef<MatEndDate<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
386386
}
387387

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

0 commit comments

Comments
 (0)