Question

我有两个使用ControlValueAccessor界面创建的控件-日期选择器和年龄选择器-并希望使用相同的值将它们绑定在一起。这些代表退休日期和年龄，用户应该能够修改一个并查看另一个输入更新。

我这样做是通过订阅form.valueChanges观察到的，就像这样：

this.form.valueChanges.subscribe((val) => {
  if (val.retirementDate !== this.currentDatePickerValue) {
    // retirement date changed
    this.currentDatePickerValue = val.retirementDate;
    setTimeout(() => this.retirementAgeCtrl.setValue(this.currentDatePickerValue));
  } else if (val.retirementAge !== this.currentAgePickerValue) {
    // retirement age changed
    this.currentAgePickerValue = val.retirementAge;
    setTimeout(() => this.retirementDateCtrl.setValue(this.currentAgePickerValue));
  }
});

在没有setTimeout()的情况下，这会引起堆栈异常，但使用它们可以正常工作。不幸的是，它效率不如预期，因为当任何一个输入发生更改时，此代码将运行十二次或更多次。

如何做到这一点，以使代码仅在必要时执行多次？

Answer 1

将emitEvent选项设置为false

emitEvent：为true或不提供时（默认值），当控制值更新时，statusChanges和valueChanges可观察对象均发出具有最新状态和值的事件。如果为false，则不会发出任何事件。

this.form.valueChanges.subscribe((val) => {
  if (val.retirementDate !== this.currentDatePickerValue) {
    // retirement date changed
    this.currentDatePickerValue = val.retirementDate;
    this.retirementAgeCtrl.setValue(this.currentDatePickerValue, {emitEvent: false})
  } else if (val.retirementAge !== this.currentAgePickerValue) {
    // retirement age changed
    this.currentAgePickerValue = val.retirementAge;
    this.retirementDateCtrl.setValue(this.currentAgePickerValue, {emitEvent: false})
  }
});

角度：将两个表单控件绑定到同一模型

1 个答案: