Форма, управляемая моделью, с ng2-bootstrap datepicker

Я осмотрелся и не смог найти ничего определенного по этому поводу - можете ли вы использовать средство выбора даты ng2-bootstrap с формой, управляемой моделью Angular2, или она работает только с шаблонными формами?

Документация описывает селектор таким образом, чтобы вы использовали его следующим образом (в качестве примера):

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

... который, кажется, работает. В идеале я хотел бы использовать его так:

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

... но, похоже, это не работает из коробки. Есть ли способ использовать этот модуль с формами, управляемыми моделями? Если нет, есть ли разумная альтернатива, которая будет работать с формами, управляемыми моделями? (Я также пробовал ng2-datepicker, но есть выдающаяся ошибка, из-за которой неудобно использовать с SystemJS, что досадно, потому что выглядит гладко).


angular datepicker angular2-forms angular2-formbuilder ng2-bootstrap
person WillyC    schedule 14.10.2016    source источник
comment
Что происходит, когда вы используете первый пример? Вы получаете ошибки? Я никогда не использовал эту библиотеку, но я думаю, что с ngModel и формами шаблонов вам нужен атрибут name   -  person Paul Samsotha    schedule 14.10.2016
comment
Он отлично работает, вам не нужен атрибут name. ... поэтому, если бы я использовал формы, управляемые шаблонами, я был бы готов, но я предпочитаю формы, управляемые моделями.   -  person WillyC    schedule 14.10.2016
comment
Извините, я неправильно понял ваш вопрос. Я прочитал это, когда вы пытались использовать первый пример, а не второй. Упс :-D   -  person Paul Samsotha    schedule 14.10.2016
comment
Можете ли вы показать полный пример компонента и шаблона. Я хотел бы попробовать это. Я уверен, что это можно сделать.   -  person Paul Samsotha    schedule 14.10.2016
comment
Программное обеспечение Valor имеет полные примеры на своем сайте. Ближе всего к моему были бы те, которые используют SystemJS и Angular2 Quickstart. Взгляните: valor-software.com/ng2-bootstrap/#/datepicker. Обратите внимание, что я в основном перешел к Primeng, поскольку он, кажется, делает то, что я ищу, прямо из коробки.   -  person WillyC    schedule 15.10.2016
comment
Ты прав. Глядя на исходник, модельные формы не поддерживаются.   -  person Paul Samsotha    schedule 15.10.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я использовал набор элементов управления primeNg, и у них есть элемент управления календарем с потрясающей функциональностью. См. здесь: Контроль пользовательского интерфейса PrimeNg Calendar

person John Baird    schedule 14.10.2016
comment
Это вообще здорово выглядит! Спасибо - попробую. Это будет средство выбора даты № 4 в моих поисках утопии средства выбора даты, но оно, безусловно, выглядит многообещающе. Я не уверен, почему это не появилось более заметно в моем поиске до сих пор... - person WillyC; 14.10.2016
comment
если это работает для вас, пожалуйста, отметьте как ответ. Я использую элемент управления календарем в своем приложении. Вы, вероятно, не нашли его, потому что это не средство выбора даты, а календарь, хотя он имеет встроенную функцию выбора даты. - person John Baird; 14.10.2016
comment
Будет сделано - я разберусь с этим сегодня днем. Пока выглядит хорошо. - person WillyC; 14.10.2016
comment
Работает хорошо, но у меня возникают проблемы с применением любого css к полю ввода. Я пытался использовать styleClass (который встраивает поле ввода во что-то, стилизованное так, как я хочу, но не стилизует ввод) и inputStyleClass, который, насколько я могу судить, ничего не делает независимо от того, какой css я связываю с этим классом. Если я попытаюсь встроить его, например, <p-calendar inputStyle="background-color:#F4F9FF;" id="startDate" formControlName="startDate"></p-calendar>, я получу ошибку; Cannot find a differ supporting object 'background-color:#F4F9FF;'. Любая идея, как успешно оформить поле ввода? - person WillyC; 15.10.2016
comment
Извините, я не большой знаток css... Существует форум сообщества PrimeNg, вы можете спросить там или здесь... - person John Baird; 18.10.2016
comment
По-видимому, это известная ошибка, исправленная в бета-версии 18, которая должна быть выпущена в ближайшее время. - person WillyC; 18.10.2016

arrow_upward
5
arrow_downward

Я сделал простую оболочку для средства выбора даты ng2-bootstrap, чтобы использовать его с ReactiveFormsModule. Он использует момент, поэтому вы можете улучшить его для своих нужд.

Демо

custom-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()
  })
}
person Дмитрий Остапен&    schedule 30.11.2016