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

【问题标题】：How to reuse Material Angular Datepicker in the same component如何在同一组件中重用 Material Angular Datepicker
【发布时间】：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，并且效果很好。
很好，我会发布一个答案，它可能对其他人有用。

标签： angular angular-material datepicker

【解决方案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>

【讨论】：