时间戳

首页 > 解决方案 > Angular Material DatePicker -- 错误：mat-form-field 必须包含 MatFormFieldControl

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

问题描述

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

应用模块

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.

标签： angularangular-material

解决方案

Angular Material 文档提供了以下错误描述：

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

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

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

要使用两个日期选择器选择日期范围，请将每个日期选择器放在其自己的mat-form-field. 请参阅 Angular 示例Datepicker 调色板颜色

例子

<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>

推荐阅读