[Angular] valueChangesでMaximum call stack size exceededエラー
3239 ワード
やりたかったこと
リアクティブフォームを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});
});
Author And Source
この問題について([Angular] valueChangesでMaximum call stack size exceededエラー), 我々は、より多くの情報をここで見つけました https://qiita.com/kozzzz/items/f561dd2a250b36c30f52著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .