[Angular] valueChangesでMaximum call stack size exceededエラー

やりたかったこと

リアクティブフォームをvalueChangesで監視し、
変更検知した値を加工してセットし直す。

実装イメージ

this.formGroup.valueChanges
.subscribe(x => {
  const y = x + x;
  this.formGroup.get('hoge').setValue(y);
});

しかし、こんなエラーが。。

Subscriber.js:244 Uncaught RangeError: Maximum call stack size exceeded
    at SafeSubscriber.Subscription.unsubscribe (Subscription.js:71)
    at SafeSubscriber.Subscriber.unsubscribe (Subscriber.js:125)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:243)
    at SafeSubscriber.next (Subscriber.js:187)
    at Subscriber._next (Subscriber.js:128)
    at Subscriber.next (Subscriber.js:92)
    at EventEmitter.Subject.next (Subject.js:56)
    at EventEmitter.emit (core.js:4322)
    at FormControlName.viewToModelUpdate (forms.js:7250)
    at eval (forms.js:2395)

原因

setValueの変更を検知して無限ループを引き起こしていた。

解決策

setValue()のoptionにemitEvent:falseを与える。

this.formGroup.valueChanges
.subscribe(x => {
  const y = x + x;
  this.formGroup.get('hoge').setValue(y, {emitEvent: false});
});