日時ピッカーに外部ライブラリを適用しようとしています。以下のようなエラーが発生します:
ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'dateTimeDeparture'
Error: No value accessor for form control with name: 'dateTimeDeparture'
私のコードは以下です:
テンプレート:
<owl-dateTime-input [(ngModel)]="flightDetails.dateTimeDeparture" name="dateTimeDeparture" [locale]="en" required></owl-dateTime-input>
コンポーネント:
this.en = {
firstDayOfWeek: 0,
dayNames: ["Sunday", "Monday", "Tuesday","Wednesday", "Thursday", "Friday", "Saturday"],
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
};
this.flightDetails = {
dateTimeDeparture: new Date(2017, 8, 10, 13, 30, 30),
dateTimeArrival: new Date(2017, 8, 10, 13, 30, 30)
};
外部ライブラリでは、angularフォームを操作するには、ControlValueAccessorが必要です。
次のようにngDefaultControl
を追加してみてください。
<owl-dateTime-input [(ngModel)]="flightDetails.dateTimeDeparture" name="dateTimeDeparture" [locale]="en" required formControlName="dateTimeDeparture" ngDefaultControl></owl-dateTime-input>
または
<owl-dateTime-input [(ngModel)]="flightDetails.dateTimeDeparture" name="dateTimeDeparture" [locale]="en" required ngDefaultControl></owl-dateTime-input>
ここを見て: