angular - 如何订阅 formGroup 更改并从其他两个属性中计算一个？

Question

我有函数创建 formGroup 并且我需要从其他两个字段中计算一个:sum = price * count。我怎样才能做到这一点？

public createService = (): FormGroup => {
    const group = this.fb.group({
      name: [''],
      measure: [''],
      count: [''],
      price: [''],
      sum: ['']
    });

    group.valueChanges.subscribe(res => {
      // group.patchValue({...res, sum: +res.price * +res.count});
      // res.sum = +res.price * +res.count;
      console.log(res);
    });

    return group;
  }

Answer 1

如果您订阅整个表单并在 value 更改中更新 sum 的值，则会有一个无限的调用周期来更改 value。相反，您应该订阅单个表单控件。

import { merge } from 'rxjs/observable/merge';

public createService = (): FormGroup => {
   const group = this.fb.group({
     name: [''],
     measure: [''],
     count: [''],
     price: [''],
     sum: ['']
   }); 

   merge(
     group.get('count').valueChanges,
     group.get('price').valueChanges
   ).subscribe(res => {
     this.calculateSum(group);
   });
}

calculateSum(group) {
  const count = +group.get('count').value;
  const price = +group.get('price').value;
  group.get('sum').setValue(count + price);
}