как обнаружить изменение значения formControl с помощью angular8, используемого через datetimepicker

Question

У меня есть календарь выбора даты, в котором на основании выбора даты я устанавливаю значение для элемента управления. Здесь у меня есть 2 элемента управления, которые являются полями даты. Таким образом, на основе выбора даты первого ввода даты 2-го поля ввода были установлены как минимальные даты, и по умолчанию 2-я дата ввода должна быть установлена ​​на один год с выбранной даты 1-го поля ввода. Поэтому я использовал событие размытия, чтобы установить значения даты. Здесь я выбрал 09/09/2020 первого входа и получил 2-й вход по умолчанию, установленный как 09/09/2021, но я изменил дату второго ввода на 08/08/2021. И теперь я был в 1-м поле даты, я ничего не изменил и вышел из вкладки, 2-й вход был выбран 09.09.2021. Может ли кто-нибудь помочь мне разобраться с этим. Это работает так, потому что я использовал (размытие) событие, и как только мы выйдем из 1-го ввода, даже без изменения даты, по умолчанию будет установлено 1-е значение ввода.

HTML:

 <input type="text" class="form-control effectiveDate" placeholder="MM/DD/YYYY"
                    formControlName="effectiveDate" (blur)="focusEffectivDate('effectiveDate')" >

TS:

  ngAfterViewInit() {
    $(".OnlyDate")
      .datetimepicker({ format: "L", useCurrent: false })
      .on("dp.change", e => {
        if (e.date) {
          const date = e.date.format("L");
          this.date = date;
        } else {
          this.date = null;
        }
      });
    if (!this.eoDetailsList) {
      $(".effectiveDate")
        .datetimepicker({ format: "L", useCurrent: false })
        .on("dp.change", e => {
          if (e.date) {
            const date = e.date.format("L");
            this.date = date;
          } else {
            this.date = null;
          }
        });
      $(".expirationDate").datetimepicker({
        useCurrent: false, //Important! See issue #1075
        format: "L",
      });
      $(".effectiveDate").on("dp.change", function (e) {
        $('.expirationDate').data("DateTimePicker").minDate(e.date);
      });
      $(".effectiveDate").on("dp.change", e => {
        const date = e.date.format("L");
        this.date = date;
        $(".expirationDate")
          .data("DateTimePicker")
          .minDate(e.date);
      });
      $(".expirationDate").on("dp.change", e => {
        if (e.date) {
          const date = e.date.format("L");
          this.date = date;
        } else {
          this.date = null;
        }
        $(".effectiveDate").data("DateTimePicker");
      });
    } else {
      $(".effectiveDate")
        .datetimepicker({ format: "L", useCurrent: false })
        .on("dp.change", e => {
          if (e.date) {
            const date = e.date.format("L");
            this.date = date;
          } else {
            this.date = null;
          }
        });
      $(".expirationDate").datetimepicker({
        useCurrent: false, //Important! See issue #1075
        format: "L",
        minDate: new Date(this.eoInfoForm.value.effectiveDate)
      });
      $(".effectiveDate").on("dp.change", function (e) {
        $('.expirationDate').data("DateTimePicker").minDate(e.date);
      });
      $(".effectiveDate").on("dp.change", e => {
        const date = e.date.format("L");
        this.date = date;
        $(".expirationDate")
          .data("DateTimePicker")
          .minDate(e.date);
      });
      $(".expirationDate").on("dp.change", e => {
        if (e.date) {
          const date = e.date.format("L");
          this.date = date;
        } else {
          this.date = null;
        }
        $(".effectiveDate").data("DateTimePicker");
      });

    }

  }

 public focusEffectivDate(event,name) {
    if (name == 'effectiveDate') {
      this.eoInfoForm.get('effectiveDate').setValue(this.date, { emitEvent: false });
      if (this.eoInfoForm.value.effectiveDate) {
        this.eoInfoForm.get('expirationDate').enable();
        var aYearFromNow = new Date(this.eoInfoForm.value.effectiveDate);
        aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 1);
        this.eoInfoForm.get('expirationDate').patchValue(new DatePipe('en').transform(aYearFromNow, 'MM/dd/yyyy'))
      } else {
        this.eoInfoForm.get('expirationDate').disable();
      }
    } else if (name == 'expirationDate') {
      this.eoInfoForm.get('expirationDate').setValue(this.date, { emitEvent: false });
    } else {
      this.eoInfoForm.get('updateReceived').setValue(this.date, { emitEvent: false });
    }
  }

DEMO