Question

我正在尝试以有角度的材料形式实现日期时间选择器，但是Iam无法做到这一点。请在下面找到我的代码。

<mat-form-field>
  <input formControlName="nextScheduledDate" mdc-datetime-picker="" date="true" time="true" type="text" id="datetimeedit"
         placeholder="Scheduled Date and Time" show-todays-date="" minutes="true" min-date="minDate" max-date="maxDate"
         edit-input="true" show-icon="true" ng-model="dateTimeEdit" name="datetimeedit"
         class=" dtp-no-msclear dtp-input mat-input">
</mat-form-field>

实施时出现以下错误：

PopupDialogComponent.html：24错误错误：mat-form-field必须包含 MatFormFieldControl。在getMatFormFieldMissingControlError（form-field.js：109）在MatFormField._validateControlChild（form-field.js：691）在MatFormField.ngAfterContentChecked（form-field.js：495）在callProviderLifecycles（core.js：32324）在callElementProvidersLifecycles（core.js：32293）在callLifecycleHooksChildrenFirst（core.js：32275）在checkAndUpdateView（core.js：44276）在callViewAction（core.js：44637）在execComponentViewsAction（core.js：44565）在checkAndUpdateView（core.js：44278）

在添加matInput时，日期选择器未打开。请帮帮我

Answer 1

以下Angular Material组件旨在在 <mat-form-field>内部运行：

<input matNativeControl> & <textarea matNativeControl>
<select matNativeControl>
<mat-select>
<mat-chip-list>

更正示例：

在matInput内使用MatFormFieldControl（它是MatFormField）

 <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

错误的示例：

请参阅input内使用MatFromField，它不是MatFormFieldControl

 <mat-form-field>
    <input type="text placeholder="Input">
  </mat-form-field>

Answer 2

您可以使用另一种在有角项目中使用DateTime选择器的方法，即使用mat-datetimepicker，可以通过以下命令进行安装。

npm i @mat-datetimepicker/core
npm i @mat-datetimepicker/moment

我创建了以下stackblitz链接，以实际表示解决方案

https://stackblitz.com/edit/angular-vesksm-z5ahjm

参考文献：-[https://github.com/kuhnroyal/mat-datetimepicker]

角材料中的日期时间选择器

2 个答案: