Как привязать значения даты к определенному полю в angular8 - PullRequest
Новая
       19

Как привязать значения даты к определенному полю в angular8

0 голосов
/ 10 февраля 2020

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

DEMO

TS: 

focusEffectivDate(name) {
      $('.onlyDate').datetimepicker(
        { format: 'L' }).on('dp.change', (e) => {
          const date = e.date.format('L');
          if(name == 'effectiveDate') {
            this.eoInfoForm.get('effectiveDate').setValue(date, { emitEvent: false });
          } else if(name == 'expirationDate') {
            this.eoInfoForm.get('expirationDate').setValue(date, { emitEvent: false });
          } else {
            this.eoInfoForm.get('updateReceivedDate').setValue(date, { emitEvent: false });
          }

        });
  }

1 Ответ

1 голос
/ 11 февраля 2020

Поскольку вы вызываете функцию onChange для DatePicker внутри focusEffectivDate, создается несколько экземпляров функции onchange (при каждом размытии поля ввода). Поэтому попробуйте переместить событие onChange выбора даты в AfterviewInit. Затем сохраните это значение в каком-либо свойстве и используйте это значение для установки значения реактивной формы.

component.ts 

ngAfterViewInit(){
   $('.onlyDate').datetimepicker(
        { format: 'L' }).on('dp.change', (e) => {
          const date = e.date.format('L');
          console.log(date);
         this.date = date;

    });
}

focusEffectivDate(name) {
     if(name == 'effectiveDate') {
            this.eoInfoForm.get('effectiveDate').setValue(this.date, { emitEvent: false });
          } else if(name == 'expirationDate') {
            this.eoInfoForm.get('expirationDate').setValue(this.date, { emitEvent: false });
          } else {
            this.eoInfoForm.get('updateReceivedDate').setValue(this.date, { emitEvent: false });
     }
}

Forked Example

...