1

ng2-bootstrap timepicker コンポーネントをラップする独自のコンポーネントの作成に取り組んでいます。何らかの理由で、@angular/forms を使用している最新バージョンのコンポーネントを使用しても、新しい Angular 2 FormControl を正しく動作させることができないようです。

コンポーネントへのリンクは次のとおりです: ng2-bootstrap timepicker

ここに私のコードの簡単なバージョンがあります:

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()
4

1 に答える 1

0 
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どこでも使用していないため、現在は必要ありません。

于 2016-08-10T07:12:55.333 に答える