Angular material: override Datepicker validation

I am quite new to Angular, and I am trying to use mat-datepciker component with 'DD/MM/YYYY' format. It is working when using calendar toggle, but not when entering the date manually inside the input field. At the beginning it automatically changed the date format. For example: if I entered 30/01/2024 it was changed to 01/30/2024. I changed this behaviour by adding this providers to my app's module:

{provide: MAT_DATE_LOCALE, useValue: 'es-ES'},
{ provide: MAT_DATE_FORMATS, useValue:
{
parse: {
dateInput: 'DD/MM/YYYY',
},
display: {
dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'DD/MM/YYYY',
monthYearA11yLabel: 'MMMM YYYY',
},
}
} ,
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },


However, if I enter the date manually it is not being validated using 'DD/MM/YYYY' format, but 'MM/DD/YYYY' as you can see in the following screenshot:



How can I prevent this behaviour?

My datepicker element:

<mat-form-field class="col-sm-6 col-lg-6">
<mat-label>Data de registre posterior o igual a:</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="searchCriteria.dataRegistreInici">
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Continue reading...