[英]How can I validate the Date from a Angular material Datepicker based on another Datepicker
I have 2 Angular Material Datepickers and want to implement the following validation: -The date of the first datepicker has to be the min-date of the 2nd one我有 2 个 Angular 材料日期选择器并希望实现以下验证:-第一个日期选择器的日期必须是第二个日期选择器的最小日期
Here are my datepickers这是我的日期选择器
<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>
On the material documentation they say, that you can add a "[min] = minDate" binding to the input, but I think this is only used for static dates, saved in a variable.在他们说的材料文档中,您可以将“[min] = minDate”绑定添加到输入,但我认为这仅用于 static 日期,保存在变量中。
I want to do something like this, on the 2nd picker我想做这样的事情,在第二个选择器上
<input matInput [min]="picker.value" placeholder="Ende" [matDatepicker]="picker2" formControlName="pEnd">
Before attempting a custom validator, you should be able to do this with a property binding to the [min]
property.在尝试自定义验证器之前,您应该能够使用绑定到
[min]
属性的属性来执行此操作。 Try this:尝试这个:
<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>
The above code does assume that pStart
and pEnd
are properly implemented formControls in a formGroup.上面的代码确实假设
pStart
和pEnd
是在 formGroup 中正确实现的 formControls。 formControlName
is not usable outside of a <form>
with a defined [formGroup]
. formControlName
在具有已定义[formGroup]
的<form>
之外不可用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.