如何基于另一个 Datepicker 验证来自 Angular 材料 Datepicker 的日期

Question

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

这是我的日期选择器

<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”绑定添加到输入，但我认为这仅用于静态日期，保存在变量中。

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

<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> 之外使用。