Question

对于我的场景，我正在使用角度反应形式。我有一个家属列表，每个受抚养人必须填写一些细节。我需要为每个受抚养者提供一份表格。依赖模型如下：

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>

控制余额hwich是只读字段，是根据其他控制值的输入值计算的。 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++;
  });
}

我现在陷入困境的是当用户输入其他值（如净收入）时如何更新余额值。为了能够更新反应式表单控件，据我所知，我们可以使用patchvalue或setvalue方法。我正在做的是订阅表单值更改，获取每个控件值，创建适当的模型，然后更新每个依赖项的表单。见下文。

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拦截的值更改...

如果emitEvent为true，则此更改将导致valueChanges事件要发出的FormControl。默认为true（因为它下降通过updateValueAndValidity）。

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

Simple Demo

如何根据输入值

1 个答案: