typescript 在Angular中将ngx时间选择器绑定到窗体控件

k5ifujac 于 2023-03-24 发布在 TypeScript

关注(0)|答案(2)|浏览(165)

我得到了一些工作的Angular材质日期选择器，但没有时间选择器。版本是Angular 8。
由于Angular Material不提供时间选择器，所以我使用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>

typescript

来源：https://stackoverflow.com/questions/61343857/bind-ngx-time-picker-to-form-control-in-angular

2条答案

按热度按时间

flvlnr441#

最后我让它工作了，但是没有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.

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

感谢所有的建议。我不知道为什么时间控制字段最后没有工作。

赞(0）回复(0）举报 2023-03-24

gudnpqoy2#

@Nancy举例来说，这个解决方案...

<ngx-timepicker-field color="warn"
                           [format]="24"
                           [defaultTime]="'08:00'" timepickerB ="ngModel"  name = "timepickerB" [(ngModel)]="service.timepickerB"></ngx-timepicker-field>

赞(0）回复(0）举报 2023-03-24

我来回答

typescript 在Angular中将ngx时间选择器绑定到窗体控件

2条答案

相关问题

热门标签

最新问答