Question

我有以下代码：

<form [formGroup]="meetingFormGroup">

                  <!-- Date Input -->
                  <mat-form-field>
                    <input
                      matInput
                      [min]="minDate"
                      [max]="maxDate"
                      [matDatepicker]="picker"
                      placeholder="Choose a date"
                      formControlName="date"
                      required
                    >
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>

                    <mat-error *ngIf="meetingFormGroup.controls['date'].hasError('required')"
                      >Please choose a date.</mat-error
                    >
                    <mat-error *ngIf="?????"
                      >Entered date is too small.</mat-error
                    >
                  </mat-form-field>
                </form>

现在在“日期验证”部分的Angular Material Website上，我读到以下内容：

每个验证属性都有一个可以检查的错误：

A value that violates the min property will have a matDatepickerMin error.
A value that violates the max property will have a matDatepickerMax error.
A value that violates the matDatepickerFilter property will have a matDatepickerFilter error.

所以我的问题是，如何验证mat-error标签中的这些错误。我需要在* ngIf表达式字段中写什么？

对于我的英语不好，我感到抱歉，希望您能理解我的问题，也许可以提供解决方案。

谢谢！

Answer 1

从Angular Material网站（here）：

违反min属性的值将出现matDatepickerMin错误。

违反max属性的值将出现matDatepickerMax错误。

违反matDatepickerFilter属性的值将出现matDatepickerFilter错误。

因此，您将使用：

至少-meetingFormGroup.controls['date'].hasError('matDatepickerMin')
最大-meetingFormGroup.controls['date'].hasError('matDatepickerMax')
用于过滤器-meetingFormGroup.controls['date'].hasError('matDatepickerFilter')。

如何验证Angular Material Datepicker？

1 个答案: