如何根据另一个日期选择器验证来自 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>
以上代码假定 pStart
和 pEnd
是在 formGroup 中正确实现的 formControl。 formControlName
在具有定义的 [formGroup]
.
的 <form>
之外不可用
我有 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>
以上代码假定 pStart
和 pEnd
是在 formGroup 中正确实现的 formControl。 formControlName
在具有定义的 [formGroup]
.
<form>
之外不可用