更新 ArrayForm 时反应形式 Angular 中断

Question

我在 Angular 应用程序中使用响应式表单时遇到问题。我设法在 Plunkr 中找出了问题。

https://plnkr.co/edit/KiTHcaaZZA6kwDI0sfeR?p=preview

我有一个带有 ArrayForm 部分的表单，我可以在其中添加带有按钮的行。这些行中的每一行都有许多输入字段，其中一些显示其他字段的结果。例如，在我的 plunkr 中我有一个 MAX 和一个 MIN 按钮，它们是数字，当它们都有值时，我需要更新另一个字段的值，称为 TOTAL。

所以这是 html 模板：

<form [formGroup]="form">
  <div>
  <input type="text" formControlName="client" placeholder="client">
  </div>

  <button type="button" (click)="addPublisher()">Add Publisher</button>

  <div formArrayName="publishers">
    <div *ngFor="let item of publishers; let i = index;">
      <div [formGroupName]="i">
        <input type="number" formControlName="max" placeholder="max">
        <input type="number" formControlName="min" placeholder="min">
        <input type="text" formControlName="total" placeholder="total">
      </div>
    </div>
  </div>

</form>

这就是重要的 ts。我正在订阅发布者的更改，并且仅当更改不是添加或删除的行时才更新行。

ngOnInit() {
    (this.form.get('publishers') as FormArray).valueChanges
      .map((publishers: any[]) => {
        if (this.totalPublishers === publishers.length) {
          publishers.forEach((publisher, index) => {
            console.log(`update publishers ${index}`);
            this.updatePublisher((this.form.get('publishers') as FormArray).get([index]) as FormGroup);
          });
        } else {
          console.log(`update total from ${this.totalPublishers} to ${publishers.length}`);
          this.totalPublishers = publishers.length;
        }
      })
      .subscribe();
  }

为了更新值，我这样做了

private updatePublisher(publisher: FormGroup) {
    this.updateTotals(publisher);
  }

  private updateTotals(publisher: FormGroup) {
    const max = publisher.get('max').value;
    const min = publisher.get('min').value;
    if (max && min) {
      console.log(max, min);
      const total = max - min;
      publisher.get('total').setValue(total);
    }
  }

如果我执行此操作，当我更新第一个字段 (max) 时，它会检查该值，并且由于 min 尚不存在，因此什么也不会发生。正确的。然后当我编辑第二个值（分钟）时，这个 updateTotals 被执行了无数次，总计在最后计算并在字段中更新，但是如果我再次尝试编辑这些字段并更新值没有任何反应。

知道为什么会这样吗？

谢谢。

Answer 1

当您调用 setValue 时，valueChange 事件在 updateValueAndValidity 内触发。一个选项应该可以帮助您

publisher.get('total').setValue(total, { emitEvent: false });

这样您的 valueChange 处理程序就不会被无限执行。

Fixed Plunker

更新 ArrayForm 时反应形式 Angular 中断

Reactive form Angular breaks when updating an ArrayForm

angular

angular-reactive-forms