日期选择器角度材质:当更改字段值时，输入字段格式会发生更改

Question

我使用角度材料的垫日期范围输入。我将"Angular Material"的日期格式从MM/dd/yyyy更改为dd/MM/yyyy，这很好。

<mat-form-field ngClass="filters_dateInterval">
<mat-label>Date interval</mat-label>
<mat-date-range-input [rangePicker]="picker" md-date-locale="{
inputDisplay: dd/MM/yyyy
}}">
<input matStartDate placeholder="Início" [(ngModel)]="dateStartFilterField" (valueChanges)="show($event)" />
<input matEndDate placeholder="Fim" [(ngModel)]="dateEndFilterField" />
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker" ngClass="filters_dateInterval__icon"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

然而，当我测试ui/ux时，我注意到了一些异常。在我用dd/MM/yyyy格式写了一个日期并集中注意力后，它丢失了该格式，日期改为MM/dd/yyyy格式。

我尝试更改app.module.ts以包含用于格式化日期的提供程序。

providers: [
{
provide: LOCALE_ID,
useValue: DATE_FORMAT_PTBR
}
]

这是我的DATE_FORMAT_PTBR:

export const DATE_FORMAT_PTBR = {
parse: {
dateInput: 'dd/MM/yyyy',
},
display: {
dateInput: 'dd/MM/yyyy',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY'
},
formater: {
dateInput: 'dd/MM/yyyy',
}
};

我也尝试将提供者的useValue更改为'pt-BR'，但这并没有影响情况。

Answer 1

如下更正TS文件，

import { MAT_DATE_FORMATS } from '@angular/material/core';
export const MY_DATE_FORMATS = {
parse: {
dateInput: 'DD/MM/YYYY',
},
display: {
dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY'
},
};

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
]
})

HTML文件如下，

<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker ></mat-datepicker>
</mat-form-field>