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动态计算两个日期之间的差异，然后修改count字段的表单值：

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

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

1 个答案: