如何在同一组件中重用 Material Angular Datepicker

Posted 2023-05-07

【中文标题】如何在同一组件中重用 Material Angular Datepicker

【英文标题】：How to reuse Material Angular Datepicker in the same component

【发布时间】：2021-11-05 01:22:47

【问题描述】：

<mat-form-field class="w-50 mt-2">
              <mat-label>Date of Change</mat-label>
              <input matInput [matDatepicker]="picker" formControlName="firstDateOfChange" required placeholder="dd/MM/yyyy">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker startView="multi-year"></mat-datepicker>
            </mat-form-field>

如何在同一个模板上重复使用这个 Material Angular Date 选择器？第一个工作正常，但是当我尝试重用相同的日期选择器时，它会在控制台中引发错误。我已经尝试在互联网上搜索，但无法正常工作。

【问题讨论】：

您可能对两个日期选择器使用相同的 ID。如果你用其他东西改变#picker怎么办？它应该可以解决问题。

你设置了相同的formcontrolname吗？

不，我使用不同的表单控件名称。

非常感谢@Maz。将三个日期选择器的#picker 更改为不同的，实际上对我来说效果很好。我没有全部使用#picker，而是分别使用了#firstpicker、#secondpicker 和#lastpicker，并且效果很好。

很好，我会发布一个答案，它可能对其他人有用。

【参考方案1】：

您可能对两个日期选择器使用相同的 ID。

如果您将 #picker 更改为其他内容会怎样？它应该可以解决问题。

<mat-form-field class="w-50 mt-2">
  <mat-label>Date of Change</mat-label>
  <input matInput [matDatepicker]="picker" formControlName="firstDateOfChange" required placeholder="dd/MM/yyyy">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="multi-year"></mat-datepicker>
</mat-form-field>

<mat-form-field class="w-50 mt-2">
  <mat-label>Date of Change</mat-label>
  <input matInput [matDatepicker]="picker2" formControlName="firstDateOfChange" required placeholder="dd/MM/yyyy">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2 startView="multi-year"></mat-datepicker>
</mat-form-field>