How to bind the date values to its particular field in angular8

问题

i am using bootstrap date picker, in which if i select date for one field, the same date is replicating to the other fields as well. I want the selected date to be binded to the formcontrolName instead of taking only one value at a time.

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:

Since you calling datepicker's onChange function inside focusEffectivDate, multiple instances of onchange function are created(on every time input field blur). So try to move your date picker onChange event to AfterviewInit. Then store that value in some property and use that value to set reactive form value.

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

来源：https://stackoverflow.com/questions/60150277/how-to-bind-the-date-values-to-its-particular-field-in-angular8

标签

angular

reactive-forms