angular - 如何使用通过 datetimepicker 使用的 angular8 检测 formControl 的 valuechange

Question

我有一个日期选择器日历，其中基于日期选择我将值设置为控件。这里我有 2 个控件，它们是日期字段。因此，基于第一个输入的日期选择，第二个输入字段的日期已设置为最小日期，默认情况下，第二个输入日期必须设置为从第一个输入字段的选定日期起一年。所以我使用模糊事件来设置日期值。在这里，我选择了第一个输入的 09/09/2020，第二个输入默认设置为 09/09/2021，但我将第二个输入的日期更改为 08/08/2021。现在我去了第一个日期字段，我没有更改任何内容并从选项卡中出来，第二个输入被选择为 09/09/2021。谁能帮我解决这个问题。这是这样工作的，因为我已经使用了（模糊）事件，并且一旦我们从第一个输入中退出，即使没有更改日期，

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

演示

标签： angularangular-reactive-forms