如何基于另一个 Datepicker 从 Angular 材料 Datepicker 验证日期

Question

我有 2 个 Angular 材料日期选择器并希望实现以下验证：-第一个日期选择器的日期必须是第二个日期选择器的最小日期

这是我的日期选择器

<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>

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

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

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

Answer 1

在尝试自定义验证器之前，您应该能够使用绑定到[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>

上面的代码确实假设pStart和pEnd是在 formGroup 中正确实现的 formControls。 formControlName在具有已定义[formGroup]的<form>之外不可用。