Angular Material DatePicker -- 错误：mat-form-field 必须包含 MatFormFieldControl

Question

我想添加一个日期选择器来选择一个日期范围。

应用模块

MatFormFieldModule,
MatDatepickerModule,
MatInputModule,

表格

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date" #arrival>
    <input matEndDate placeholder="End date" #departure>
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

但我收到以下错误：

ERROR Error: mat-form-field must contain a MatFormFieldControl.

Answer 1

Angular Material docs 提供以下错误描述：

错误：mat-form-field 必须包含 MatFormFieldControl

当您没有向表单添加表单域控件时会发生此错误 场地。如果您的表单字段包含本机 <input> 或 <textarea> 元素，请确保您已向其中添加了 matInput 指令并具有 导入MatInputModule。其他可以作为表单域的组件 控件包括<mat-select>、<mat-chip-list>和任何自定义表单 您创建的字段控件。

matInput 指令需要添加到<input> 元素中。

要使用两个日期选择器选择日期范围，请将每个日期选择器放在其自己的 mat-form-field 中。请参阅 Angular 示例 Datepicker palette colors

示例

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>