Angular Material DatePicker——错误 : mat-form-field must contain a 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提供以下错误描述:

Error: mat-form-field must contain a MatFormFieldControl

This error occurs when you have not added a form field control to your formfield. If your form field contains a native <input> or <textarea>element, make sure you've added the matInput directive to it and haveimported MatInputModule. Other components that can act as a form fieldcontrol include <mat-select>, <mat-chip-list>, and any custom formfield controls you've created.

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>