angular - 如何根据输入值更新嵌套的 react 形式

Question

对于我的场景，我使用的是 Angular react 形式。我有一份家属名单，每个家属都必须填写一些细节。我需要为每个受抚养人准备一份表格。 dependent的模型如下:

export class Dependent {
    surname: string;
    othNames: string;
    nid: string;
    dateOfBirth: string;
    relationship: string;
    netIncExempt: number;
    exemptDiv: number;
    exemptInt: number;
    exemptOth: number;
    exemptEmol: number;
    balance: number;
}

我需要根据输入值计算每个表单的总数。请参阅下面的 html

<form [formGroup]="dependentIncomeForm">
  <div formArrayName="dependentsArray">
    <ion-card [formGroupName]="i" *ngFor="let dependent of dependentsArray.controls; let i = index">
      <ion-card-header (click)="current = i">
        <ion-item [ngStyle]="{'background-color': dependent.valid ? 'lightskyblue' : 'lightcoral'}">
          Dependent {{i+1}}: {{dependent.controls["nid"].value}}
          <button ion-button type="button" (click)="current = i">
            <ion-icon [name]="i === current ? 'arrow-down' : 'arrow-forward'"></ion-icon>
          </button>
        </ion-item>
      </ion-card-header>
      <ion-grid class='expand-wrapper' [class.collapsed]="current != i">
        <ion-row>
          <ion-col col-8>Net Income and exempt Income (Rs)</ion-col>
          <ion-col ion-item col-4>
            <ion-input formControlName="netIncExempt" type=tel maxlength="10" allow-numbers-only></ion-input>
          </ion-col>
        </ion-row>
        <ion-row *ngIf="dependent.controls['netIncExempt'].errors && dependent.controls['netIncExempt'].errors.threshold">
          {{dependent.controls['netIncome'].errors.threshold.value}}
        </ion-row>
        <ion-row>
          <ion-col col-8>Less: Exempt dividends (Rs)</ion-col>
          <ion-col ion-item col-4>
            <ion-input formControlName="exemptDiv" type="text" maxlength="10" allow-numbers-only></ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-8>Less: Exempt interest (Rs)</ion-col>
          <ion-col ion-item col-4>
            <ion-input formControlName="exemptInt" type="tel" maxlength="10" allow-numbers-only></ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-8>Less: Other exempt income (Rs)</ion-col>
          <ion-col ion-item col-4>
            <ion-input formControlName="exemptOth" type="tel" maxlength="10" allow-numbers-only></ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-8>Less: Emoluments (Rs)</ion-col>
          <ion-col ion-item col-4>
            <ion-input formControlName="exemptEmol" type="tel" maxlength="10" allow-numbers-only></ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-8>Balance</ion-col>
          <ion-col ion-item col-4>
            <ion-input formControlName="balance" readonly></ion-input> 
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card>
  </div>
</form>

控制余额是一个只读字段，是根据其他控制值的输入值计算的。 dependentsArray 根据受抚养人的数量进行填充。见下文

if (this.dependentList.length > 0) {
  //this variable count represents the index of each dependent as it depends on the threshold
  let count = 0;
  this.dependentList.forEach((dep: Dependent) => {
    this.dependentsArray.push(this.fb.group({
      nid: [dep.nid],
      netIncExempt: [null, [Validators.required, validateThreshold(count)]],  //validators for dependents
      exemptDiv: [null, Validators.required],
      exemptInt: [null, Validators.required],
      exemptOth: [null, Validators.required],
      exemptEmol: [null, Validators.required],
      balance: [null]
    }));
    count++;
  });
}

我现在遇到的问题是当用户要输入其他值(例如净收入)时如何更新余额值。为了能够更新响应式(Reactive)表单控件，据我所知，我们可以使用 patchvalue 或 setvalue 方法。我正在做的是订阅表单 valuechanges，获取每个控件值，创建适当的模型，然后为每个依赖项更新表单。见下文。

subscribeToFormChanges() {
    let dependentTemp: Dependent;
    let idx: number = 0;
    this.dependentIncomeForm.valueChanges.subscribe((data) => {
      data.dependentsArray.forEach((item: Dependent) => {
        dependentTemp = this.dependentList.find((dep:Dependent) => dep.nid === item.nid);
        dependentTemp.netIncExempt = +item.netIncExempt || 0;
        dependentTemp.calculateBalancePerDependent();
        //this.updateDepForm(idx, dependentTemp.balance);
        idx++;
      });
      this.incomeDep.calculateBalForAllDependents();
    });
  }

  updateDepForm(idx: any, balance: number) {
    let formGroup = this.dependentsArray.controls[idx] as FormGroup;
    formGroup.controls["balance"].patchValue(balance);
  }

在 subscribeToFormChanges 方法中注释的行给我以下错误最大调用堆栈大小超出。我猜测存在某种循环依赖，因为我正在监听表单更改然后同时更新它。

Answer 1

在 patchValue 上使用 {emitEvent: false} 选项，否则patchValue会触发valueChanges.subscrbe拦截的值变化...

If emitEvent is true, this change will cause a valueChanges event on the FormControl to be emitted. This defaults to true (as it falls through to updateValueAndValidity).

formGroup.controls["balance"].patchValue(balance,{emitEvent: false});

Simple Demo