valueChange在formArray中的formArray

Question

我有一个包含formArray ( FinYearArray )的表单，它反过来包含另一个formArray ( RecipientArray )，这两个FinYearArray和RecipientArray都包含一个金额的formControl，每当这些字段发生变化时，就应该按财政年度和受援国的财政年度计算总额。对于接收者的总数，我在名为“formControl”的FinYearArray中创建了一个RecipientTotal

//structure of the form
{
    "FinYearArray": [
        {
            "FinYear": 2022,
            "FinYearAmount": 0,
            "RecipientTotal": 0,
            "RecipientArray": [
                {
                    "CtryDesc": "",
                    "Amount": 0,
                },
                {
                    "CtryDesc": "",
                    "Amount": 0,
                }
            ],
        },
        {
            "FinYear": 2023,
            "FinYearAmount": 0,
            "RecipientTotal": 0,
            "RecipientArray": [
                {
                    "CtryDesc": "",
                    "Amount": 0,
                }
            ],
        }
     ],
    "ProjectCode": "",
}

在我的ngOnInit()中，我有以下代码来检查FinYearArray formArray中的更改以及RecipientArray formArray中的自动更改，因为它在另一个formArray中

//function that calculates the totals for fin year and recipients/fin year

    this.formDetailReport.get('FinYearArray').valueChanges.subscribe(values => {
        this.myFinYearTotal = 0;
        const ctrl = <FormArray>this.formDetailReport.controls['FinYearArray'];

    //loop trough fin years
        ctrl.controls.forEach(x => {
            let parsed = Number(x.get('FinYearAmount').value);
            this.myFinYearTotal += parsed;
        });

//loop through recipient countries for each financial year
            for (let i = 0; i < ctrl.controls.length; i++) {
                this.myRecipientTotal = 0;
                const recipientFormArray = <FormArray>ctrl.controls[i].get('RecipientArray');

                recipientFormArray.controls.forEach(x => {
                    let parsed = Number(x.get('Amount').value);
                    this.myRecipientTotal += parsed;
                });
                console.log('total : ' + i + ' amount : ' + this.myRecipientTotal );
// when using this code i get the error at the end of this mail
                this.formDetailReport.controls['cFinYearGroup']['controls'][i].controls.cRecipientTotal.setValue(this.myRecipientTotal);
                // ctrl[i].controls.cRecipientTotal.setValue(this.myRecipientTotal);
            }
            this.ref.detectChanges();
        });

但我知道这个错误

// error when i try to assign the calculate value to the formControl
core.js:4442 ERROR RangeError: Maximum call stack size exceeded
    at EuiInputNumberComponent.ngDoCheck (eui-components-next.js:11713:1)
    at callHook (core.js:3285:1)
    at callHooks (core.js:3251:1)
    at executeInitAndCheckHooks (core.js:3203:1)
    at refreshView (core.js:7395:1)
    at refreshEmbeddedViews (core.js:8481:1)
    at refreshView (core.js:7404:1)
    at refreshComponent (core.js:8527:1)
    at refreshChildComponents (core.js:7186:1)
    at refreshView (core.js:7430:1)

我认为这是因为每次我更新收件人总数(cRecipientTotal formControl)时，都会重新执行这段代码，因为formArray中有一个valueChange。

难道这个valueChange不只是在监视formArray中的FinYearAmount formControl而不是监视这个formArray的所有字段吗？在RecipientArray中观察格式控制量的后缀

Answer 1

当更新一个附加了一个AbstractControl侦听器且不想重新触发它的valueChanges时(导致您所遭受的无限循环)，您可以向您的setValue/patchValue调用中添加一个配置对象：

myFormControl.setValue(value, { emitEvent: false });