javascript - 修补 FormBuilder 表单中的值并观察更改会导致无限循环

Question

我有简单的 Angular FormBuilder 表单(在 Ionic 2 应用程序中)，包含 3 个字段:

constructor(public navCtrl: NavController, public navParams: NavParams,
    public viewCtrl: ViewController, private builder: FormBuilder) {
        this.form = this.builder.group({
            startDate: ['', Validators.required],
            endDate: ['', Validators.required],
            count: [0, Validators.required], //diff in days
        });
}

我的模板:

  <ion-item>
    <ion-label floating>Start</ion-label>
    <ion-datetime formControlName="startDate" [min]="today_iso" displayFormat="DD/MM/YYYY" pickerFormat="DD/MM/YYYY">
    </ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label floating>End</ion-label>
    <ion-datetime formControlName="endDate" [min]="today_iso" displayFormat="DD/MM/YYYY" pickerFormat="DD/MM/YYYY">
    </ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label fixed>Count</ion-label>
    <ion-input type="number" formControlName="count" ></ion-input>
  </ion-item>

我想使用 moment.js 动态计算两个日期之间的差异，然后修改计数字段的表单值:

this.form.valueChanges.subscribe(data => {
  let startDate = moment(data.startDate);
  let endDate = moment(data.endDate);
  let diff = endDate.diff(startDate, 'days');

  if(diff>0) {
    this.form.patchValue({
      count: diff
    })
  }
});

但是，似乎 form.patchValue 导致了 valueChanges.subscribe 的另一次执行，并且我得到了无限循环执行(超出了最大调用堆栈大小)。我怎样才能避免这种情况？有没有更好的方法来动态修改表单值？

Answer 1

我猜你正在寻找这个:

this.form.patchValue({ count: diff }, { emitEvent: false });

这样 valueChange 就不会被触发

<强> Plunker Example