在 Angular 9 响应式表单中收听 2 个依赖字段的更改答案

【问题标题】：Listen to Changes on 2 Dependent Fields in Angular 9 Reactive forms在 Angular 9 响应式表单中收听 2 个依赖字段的更改
【发布时间】：2020-07-12 18:09:56
【问题描述】：

我有 2 个角度反应形式的表单字段，当我更改增益百分比时，价格会立即更改，而当价格更改时，会计算百分比并立即更改。

我做了以下事情：

const avgPrice = this.totalStockProductForm.get('AVERAGE_PRICE').value;
this.totalStockProductForm.get('PERCENTAGE_GAIN').valueChanges.subscribe(percentage => {
    this.totalStockProductForm.controls['FINAL_PRODUCT_PRICE'].patchValue(
        avgPrice + avgPrice * (percentage / 100)
    );
});
this.totalStockProductForm.get('FINAL_PRODUCT_PRICE').statusChanges.subscribe(finalPrice => {
    this.totalStockProductForm.controls['PERCENTAGE_GAIN'].patchValue(
        ((finalPrice - avgPrice) / avgPrice) * 100
    );
});

我知道，它最终发生了，这将导致无限循环。如何实现更改一个条目并立即预览另一个条目的目标？

【问题讨论】：

标签： angular angular8 angular-reactive-forms angular9

【解决方案1】：

const avgPrice = this.totalStockProductForm.get('AVERAGE_PRICE').value;
this.totalStockProductForm.get('PERCENTAGE_GAIN').valueChanges.subscribe(percentage => {
    this.totalStockProductForm.controls['FINAL_PRODUCT_PRICE'].patchValue(
        avgPrice + avgPrice * (percentage / 100),
        { emitEvent: false }
    );
});
this.totalStockProductForm.get('FINAL_PRODUCT_PRICE').statusChanges.subscribe(finalPrice => {
    this.totalStockProductForm.controls['PERCENTAGE_GAIN'].patchValue(
        ((finalPrice - avgPrice) / avgPrice) * 100,
        { emitEvent: false }
    );
});

添加 { emitEvent: false } 将阻止检测其他字段上的其他事件，从而解决无限循环问题！希望它可以帮助某人！

【讨论】：