Angular material datepicker：如何为无效和必需的输入获取两个不同的验证错误

我想根据空值和无效日期格式验证angular material datepicker输入，但有两条单独的错误消息，一条是空值，另一条是无效输入

我的html：

     <mat-form-field appearance="outline">
        <mat-label>Data di nascita*</mat-label>
        <input matInput [matDatepicker]="picker" 
           formControlName="birthday">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker- 
         toggle>
        <mat-datepicker touchUi #picker></mat-datepicker>
        <mat-error 
           *ngIf="newCat.controls['birthday'].hasError('required')">Campo 
             obbligatorio</mat-error>
        <mat-error *ngIf="newCat.controls['birthday'].invalid">Formato di 
            data errato</mat-error>
     </mat-form-field>

在我的案例中，当输入为emty或日期无效时，将两条消息一起进行比较，同时获得“Campo obbligatorio”和“Formato di data errato”。

有两个选项：

一,。 将Datepicker的matinput设置为只读，然后在TS或HTML代码中设置Datepicker的有效日期格式：

<input matInput [matDatepicker]="picker" formControlName="birthday" readonly>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker></mat-datepicker>

二,。 将第二个Mat错误标记更改为：

<mat-error *ngIf="!newCat.controls['birthday'].hasError('required') && newCat.controls['birthday'].invalid">
  Formato di data errato
</mat-error>

格式化数据勘误表

试试这个

<mat-form-field appearance="outline">
        <mat-label>Data di nascita*</mat-label>
        <input matInput [matDatepicker]="picker" 
           formControlName="birthday" [matDatepickerFilter]="filterDatePicker()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker- 
         toggle>
        <mat-datepicker touchUi #picker></mat-datepicker>
        <mat-error 
           *ngIf="newCat.controls['birthday'].hasError('required')">Campo 
             obbligatorio</mat-error>
        <mat-error *ngIf="invalidDate">Formato di 
            data errato</mat-error>
     </mat-form-field>


filterDatePicker() {
 // write your logic for selected date validation here.
   if(uoir condition) {

   this.invalidDate = true;

} else {
 this.invalidDate = false;
}

纳斯塔数据中心*
坎波
obbligatorio
Formato di
数据勘误表
filterDatePicker（）{
//在此处编写所选日期验证的逻辑。
if（uoir条件）{
this.invalidDate=true；
}否则{
this.invalidDate=false；
}

将其设置为只读，并为日期选择器选择使用正确的格式！我需要让字段可编辑第一个选项不适用，因为我想让输入可编辑。第二个选项不起作用。可能这是唯一可能的解决方案

<mat-form-field appearance="outline">
        <mat-label>Data di nascita*</mat-label>
        <input matInput [matDatepicker]="picker" 
           formControlName="birthday" [matDatepickerFilter]="filterDatePicker()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker- 
         toggle>
        <mat-datepicker touchUi #picker></mat-datepicker>
        <mat-error 
           *ngIf="newCat.controls['birthday'].hasError('required')">Campo 
             obbligatorio</mat-error>
        <mat-error *ngIf="invalidDate">Formato di 
            data errato</mat-error>
     </mat-form-field>


filterDatePicker() {
 // write your logic for selected date validation here.
   if(uoir condition) {

   this.invalidDate = true;

} else {
 this.invalidDate = false;
}