html - 将 ngx 时间选择器绑定到 Angular 中的表单控件

问题描述

我有一些工作的 Angular 材料日期选择器，但没有时间选择器。版本是 Angular 8。

由于 Angular 材质不提供时间选择器，我使用的是ngx-material-timepicker。

我可以将时间选择器添加到 html，但我不知道如何获取所选时间，因为将其绑定到输入会引发错误：

  <input [ngxTimepicker]="timePicker" />
  <ngx-timepicker-field
          #timePicker
          [format]="24"
          [defaultTime]="'6:00 am'"
   ></ngx-timepicker-field>

错误是ERROR TypeError: "this._timepicker.registerInput is not a function."

我也尝试使用表单字段，但收到相同的错误：

 <mat-form-field>
          <input
            matInput
            [formControl]="timeFormCtrl"
            [ngxTimepicker]="timePicker"
          />

          <ngx-timepicker-field
            #timePicker
            [format]="24"
            [defaultTime]="'6:00 am'"
          ></ngx-timepicker-field>
</mat-form-field>

标签： htmlangulartypescriptangular-material

我最终让它工作，但没有ngx-timepicker-field. 我决定使用普通的ngx-timepicker.

模板如下所示：

<mat-form-field>
    <mat-label>Time</mat-label>
    <input
        matInput
        aria-label="default time"
        [ngxTimepicker]="defaultValue"
        [value]="'0:00 am'"
        [(ngModel)]="time"
     />
     <ngx-material-timepicker #defaultValue>
     </ngx-material-timepicker>
</mat-form-field>

如您所见，我没有使用表单控件，而是简单地绑定到我的控制器中[(ngModel)]调用的变量。time

export class FeatureListComponent implements OnInit {
// [...]
    time = '6:00 am'; // this shows up as default time.

现在，时间选择器看起来像这样，这不是我想要的，但现在已经足够了：

感谢所有的建议。我不确定为什么时间控制字段最终不起作用。

html - 将 ngx 时间选择器绑定到 Angular 中的表单控件

问题描述

解决方案

推荐阅读