带有 ng2-bootstrap datepicker 的模型驱动表单

Question

我环顾四周，但没能找到任何关于此的明确信息 - 您能否将 ng2-bootstrap 日期选择器与 Angular2 模型驱动的表单一起使用，还是它只适用于模板表单？

文档描述了选择器，您可以按如下方式使用它（作为示例）：

<datepicker [(ngModel)]="startDate" ></datepicker>

...这似乎确实有效。理想情况下，我想像这样使用它：

<datepicker formControlName="startDate" ></datepicker>

...但开箱即用似乎无法正常工作。有没有办法将这个模块与模型驱动的表单一起使用？如果没有，是否有一个合理的替代方案可以与模型驱动的表单一起使用？（我也尝试过 ng2-datepicker 但是有一个 outstanding bug 使得它不方便与 SystemJS 一起使用，这很不幸，因为它看起来很光滑）。

Answer 1

我使用过 primeNg 控件集，它们有一个功能惊人的日历控件。在这里查看： PrimeNg Calendar UI Control

Answer 2

我为 ng2-bootstrap 日期选择器制作了简单的包装器，以便将其与 ReactiveFormsModule 一起使用。它使用力矩，因此您可以根据需要对其进行改进。

Live demo

自定义-datepicker.component.ts

import { Component, forwardRef, Provider } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import * as moment from 'moment';

let DATEPICKER_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CustomDatepickerComponent),
  multi: true
};

@Component({
  selector: 'custom-datepicker[formControlName]',
  template: `
    <datepicker [(ngModel)]="datePickerValue"></datepicker>
  `,
  providers: [DATEPICKER_VALUE_ACCESSOR]
})
export class CustomDatepickerComponent implements ControlValueAccessor {
  change = (_: any) => {};
  _customDatePickerValue;
  _datePickerValue: Date;

  get customDatePickerValue() {
    return this._customDatepickerValue;
  }
  set customDatePickerValue(value) {
    this._customDatepickerValue = value;
    this.change(value);
  }

  get datePickerValue() {
    return this._datePickerValue;
  }
  set datePickerValue(value) {
    this._datePickerValue = value;
    this.customDatePickerValue = moment(value).format('DD/MM/YYYY');
  }

  writeValue() {}
  registerOnChange(fn) {
    this.change = fn;
  }
  registerOnTouched() {}
}

在您的组件中的使用

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
  <form [formGroup]="form">
    <custom-datepicker formControlName="customDatepickerValue"></custom-datepicker>
  </form>

  <pre>{{form.value | json }}</pre>
    `
})
export class AppComponent {
  form: FormGroup = new FormGroup({
    customDatepickerValue: new FormControl()
  })
}

带有 ng2-bootstrap datepicker 的模型驱动表单

Model Driven form with ng2-bootstrap datepicker

datepicker

angular2-forms

ng2-bootstrap

angular2-formbuilder

angular