Прослушайте изменения в 2 зависимых полях в Angular 9 реактивных формах

Question

У меня есть 2 поля формы в angular реактивных формах, где при изменении% прироста цена изменяется немедленно, а при изменении цены% вычисляется и изменяется немедленно.

I сделал следующее:

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

Я знаю, и это в конечном итоге произошло, это приведет к бесконечному l oop. Как я могу достичь своей цели: изменить одну запись и сразу же просмотреть изменения для другой?

Answer 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} заблокирует обнаружение других событий в других полях, что решит бесконечную проблему l oop! Надеюсь, это кому-нибудь поможет!