angular - Angular - 多材料日期选择器

Question

我正在创建一个动态表单，某些字段可能是日期字段。现在我尝试使用 Angular 教程中的默认代码mat-datepicker

这是现在的代码：

<mat-form-field class="right-0 w-full form-viewer">
    <mat-label class="overflow-ellipsis overflow-hidden whitespace-nowrap w-8/12">
        {{ field.label | translate }}
    </mat-label>
    <input [id]="field.id" matInput [matDatepicker]="picker"
           (focusin)="ocr($event, true, field.color)"
           (focusout)="ocr($event, false)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

这就是我想要的，带有动态 id ：

<mat-form-field class="right-0 w-full form-viewer">
    <mat-label class="overflow-ellipsis overflow-hidden whitespace-nowrap w-8/12">
        {{ field.label | translate }}
    </mat-label>
    <input [id]="field.id" matInput [matDatepicker]="field.id"
           (focusin)="ocr($event, true, field.color)"
           (focusout)="ocr($event, false)">
    <mat-datepicker-toggle matSuffix [for]="field.id"></mat-datepicker-toggle>
    <mat-datepicker [id]='field.id'></mat-datepicker>
</mat-form-field>

但这不起作用，这是我遇到的错误：

提前致谢