Google Chromeのversion 80でリアクティブフォームの値が正しく取得できない時がある

トラブルシューティング
#1

Google Chromeのversion 79では発生せずversion 80でのみ発生する事象のため、Googleに問い合わせるべきかと思いましたが一度こちらでご相談させていただきたく投稿致しました。

発生事象
まず、入れ子にしたFormGroupをcomponentに配置し、htmlテンプレート経由でプロパティとして親FormGroupのgetメソッドを使ってFormGroupを設定します。
そして親のFormGroupに対してmarkAsPristineやmarkAsTouchedメソッドを呼び出すとhtmlテンプレート側で下記のエラーが発生してしまいます。

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
   Example:

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

以下は再現コードです。


※再現コードではエラーを故意に発生させるためにdetectChangeを頻繁に実行しております。
再現したChromeのバージョン: 80.0.3987.85

原因と対策についてご存じの方がいらっしゃったらご教示いただきたいです。

補足
EdgeのDev版(81.0.403.1)でも同様の事象が再現するようです。
こちらchromeのbeta版での事象のためstableになった時に解消していたらすみません。

「いいね！」 1
#2

確かに貼っていただいたstackblitzのアプリはChrome79と80 (canary)で違いが出ていて奇妙ですね。

しかしこのサンプルのエラーはsetIntervalによるdetectChangesのループをやめれば発生しないようなので、本来の原因はわかりませんでした。また、markAsPrinstineやmarkAsDirtyなどは正しく実行されているようでした。

「いいね！」 1
#3

奇妙ですよね。
結局リリースされたversion 80.3987.87でも同様な事象が発生するようでした。

もともとこの事象を発見した時は非同期でviewの更新が走る処理があり、その時のngDoCheckとmarkAsPristineがバッティングしたようでした。

formGroupが多数配置されている画面などでは

form.patchValue({});
form.markAsPristine();

上記のようにformに値を入れてから未編集状態にするという処理を行っても発生するようです。
pathValueでのview更新とmarkAsPristineがぶつかってエラーとなっていると思われます。

これはGoogleに問い合わせてみるしかなさそうですかね。

#4

本日リリースされたAngular V9で現象が解消されたようです。
お騒がせしました。

結局根本原因は分からずじまいですが…

追記
すみません、解消はされていませんでした。
ただ、発生頻度は下がっているようです。
Githubに投稿されてましたね

「いいね！」 1
#5

こちらchrome側のバグだったようで現在はパッチが当たっているようです。
https://bugs.chromium.org/p/chromium/issues/detail?id=1049982

また、reduce関数のバグだったのでAngular9でもreduce関数を使わないようにする修正が入っています。

お騒がせしました。

「いいね！」 1
#6

ナイス追跡でした！Chrome側のバグでホッとしました