ng2-bootstrapで新しいフォームを使用する方法Timepicker

Question

ng2-bootstrap timepickerコンポーネントをラップする独自のコンポーネントを作成しています。何らかの理由で、Angular 2 FormControlを@ Anger/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); 
    } 
} 

これは私がコンポーネントを使用しようとすると、私は見ていますエラーです：

ここ ng2-bootstrap timepicker

は簡易版私のコードです

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は必要ありません。