如何将日期值绑定到角度 8 中的特定字段答案

【问题标题】：How to bind the date values to its particular field in angular8如何将日期值绑定到角度 8 中的特定字段
【发布时间】：2020-02-11 14:56:54
【问题描述】：

我正在使用引导日期选择器，如果我为一个字段选择日期，则相同的日期也会复制到其他字段。我希望将所选日期绑定到 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.不要将 jQuery 与 Angular 一起使用。 2. 我会推荐使用 ng-bootstrap 库
ng-bootstrap 有一个 datepicker 的实现：ng-bootstrap.github.io/#/components/datepicker/overview
根据我的要求，必须使用这个带有 jquery 的引导程序，只有这个日历可以满足我的需要，所以我已经使用它并且没有使用任何插件
永远不要将 jQuery 与 Angular 一起使用（如果它是唯一的方法，那就使用它），Angular 提供了所有易于实现的用途
谁能帮我解决这个问题，stackoverflow.com/questions/60146919/…

标签： angular angular-reactive-forms

【解决方案1】：

由于您在 focusEffectivDate 中调用 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

【讨论】：