在valueChanges上更新reactive-forms中的字段

Question

我想直接在反应式表单中格式化输入的内容(最好在显示之前)。用我目前的方法，我尝试用'valueChanges‘订阅这个字段。

但这会导致递归，这是可以理解的。每次我更改订阅字段中的值时，都会再次调用它。

因此，我的问题是，如何在显示之前直接编辑输入？

export class NewPaymentComponent implements OnInit {
  paymentForm: FormGroup;

  constructor() {}

  ngOnInit(): void {

    this.paymentForm = new FormGroup({
      amountFormatted: new FormControl('0.00', Validators.required)
    });

    this.paymentForm.get('amountFormatted').valueChanges.subscribe((change) => {
      this.paymentForm
        .get('amountFormatted')
        .setValue(this.formatAmount(change));
    });
  }

  formatAmount(input: string): string {
    // ... method body omitted
    return "changed";
  }

}

在另一次尝试中，我尝试使用pipe和map更改该值。在tap中，会写入正确的路径，但不会将其用于字段。

    this.paymentForm
      .get('amountFormatted')
      .valueChanges.pipe(
        map((val) => (val = this.formatAmount(val))),
        tap((change) => console.log('onTap', change))
      )
      .subscribe();

Answer 1

考虑将emitEvent设置为false，如下所示：

this.paymentForm.get('amountFormatted').valueChanges.subscribe((change) => {
  this.paymentForm
    .get('amountFormatted')
    .setValue(this.formatAmount(change), { emitEvent: false });
});