如何根据另一个日期选择器验证来自 Angular material 日期选择器的日期

How can I validate the Date from a Angular material Datepicker based on another Datepicker

我有 2 个 Angular Material 日期选择器,我想执行以下验证: -第一个日期选择器的日期必须是第二个日期选择器的最小日期

这是我的日期选择器

<mat-form-field appearance="legacy" [style.width.%]="45">
  <mat-label>Phasenbeginn</mat-label>
  <input matInput  placeholder="Beginn" [matDatepicker]="picker" formControlName="pStart">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>                                   
          
<mat-form-field appearance="legacy" [style.width.%]="45">
  <mat-label>Phasenende</mat-label>
  <input matInput  placeholder="Ende" [matDatepicker]="picker2" formControlName="pEnd">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
 </mat-form-field>

他们在 material 文档中说,您可以将“[min] = minDate”绑定添加到输入,但我认为这仅用于保存在变量中的静态日期。

我想在第 2 个选择器上做这样的事情

<input matInput [min]="picker.value" placeholder="Ende" [matDatepicker]="picker2" formControlName="pEnd">

在尝试自定义验证器之前,您应该能够通过 属性 绑定到 [min] 属性 来完成此操作。试试这个:

<mat-form-field appearance="legacy" [style.width.%]="45">
  <mat-label>Phasenbeginn</mat-label>
  <input matInput [max]="pEnd.value" placeholder="Beginn" [matDatepicker]="picker" formControlName="pStart">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>                                   
          
<mat-form-field appearance="legacy" [style.width.%]="45">
  <mat-label>Phasenende</mat-label>
  <input matInput [min]="pStart.value" placeholder="Ende" [matDatepicker]="picker2" formControlName="pEnd">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
 </mat-form-field>

以上代码假定 pStartpEnd 是在 formGroup 中正确实现的 formControl。 formControlName 在具有定义的 [formGroup].

<form> 之外不可用