如何使用带有 ng2-bootstrap Timepicker 的新表单

Question

我正在创建我自己的组件来包装 ng2-bootstrap timepicker 组件。出于某种原因，我似乎无法让新的 Angular 2 FormControl 正常工作，即使使用最新版本的组件也使用 @angular/forms.

这是我的代码的简单版本：

import { Component, Input, EventEmitter, OnInit } from '@angular/core';

import { FormControl, FORM_DIRECTIVES } from '@angular/forms';
import { TimepickerComponent } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-timepicker',
  directives: [ REACTIVE_FORM_DIRECTIVES, TimepickerComponent ],
  template: `
  <div class="well">
    <timepicker
      [(ngModel)]="initialValue"
      [formControl]="timePickerControl"
      [hourStep]="hourStep"
      [minuteStep]="minuteStep"
      [showMeridian]="showMeridian"
      [readonlyInput]="disabled"
      [mousewheel]="mousewheel"
      [arrowkeys]="arrowkeys"
      [showSpinners]="showSpinners"
      [min]="min"
      [max]="max"
    ></timepicker>
  </div>
`
})
export class TimePickerComponent implements OnInit {
  timePickerControl: FormControl;
  initialValue: Date;
  hourStep: number = 1;
  minuteStep: number = 1;
  showMeridian: boolean = true;
  mousewheel: boolean = true;
  arrowkeys: boolean = true;
  showSpinners: boolean = true;
  min: Date;
  max: Date;

ngOnInit() {
  this.initialValue = new Date();
  this.timePickerControl = new FormControl(this.initialValue, Validators.required);
  }
}

这是我在尝试使用该组件时看到的错误：

No provider for NgModel ("
<div class="well">
    [ERROR ->]<timepicker
      [(ngModel)]="initialValue"
      [formControl]="timePickerControl"
")

在我的 app.ts 中，我确保包含以下调用：

provideForms()
disableDeprecatedForms()

Answer 1

import { FORM_DIRECTIVES } from '@angular/forms';
import { TimepickerComponent } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-timepicker',
  directives: [FORM_DIRECTIVES, TimepickerComponent ],
  template: `
  <div class="well">
    <timepicker
      [(ngModel)]="initialValue"
      [hourStep]="hourStep"
      [minuteStep]="minuteStep"
      [showMeridian]="showMeridian"
      [readonlyInput]="disabled"
      [mousewheel]="mousewheel"
      [arrowkeys]="arrowkeys"
      [showSpinners]="showSpinners"
      [min]="min"
      [max]="max"
      name="aTimePicker"
      required
    ></timepicker>
  </div>
`
})
export class TimePickerComponent implements OnInit {
  initialValue: Date;
  hourStep: number = 1;
  minuteStep: number = 1;
  showMeridian: boolean = true;
  mousewheel: boolean = true;
  arrowkeys: boolean = true;
  showSpinners: boolean = true;
  min: Date;
  max: Date;

ngOnInit() {
  this.initialValue = new Date();
  }
}

我运行在使用日期选择器时遇到了类似的问题，我在上面的代码片段中做了一些更改，反映了我为让它工作所做的工作，我还没有测试更改，但让我知道进展如何，希望它至少是一个起点。

据我所知，您目前不需要 REACTIVE_FORM_DIRECTIVES，因为您没有在任何地方使用它。

如何使用带有 ng2-bootstrap Timepicker 的新表单

How to use new Forms with ng2-bootstrap Timepicker

html

controls

angularjs

typescript

ng2-bootstrap