如何将日期值绑定到angular8中的特定字段 [英] How to bind the date values to its particular field in angular8

问题描述

我正在使用引导日期选取器，其中如果我为一个字段选择日期，相同的日期也会复制到其他字段。我希望将所选日期绑定到formControl Name，而不是一次只获取一个值。

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 });
          }

        });
  }

DatePicker

由于您在推荐答案内调用了datepicker的onChange函数，因此将创建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

这篇关于如何将日期值绑定到angular8中的特定字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！