so-oki
2020 年 2 月 4 日午前 5:41
#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
確かに貼っていただいたstackblitzのアプリはChrome79と80 (canary)で違いが出ていて奇妙ですね。
しかしこのサンプルのエラーはsetIntervalによるdetectChangesのループをやめれば発生しないようなので、本来の原因はわかりませんでした。また、markAsPrinstineやmarkAsDirtyなどは正しく実行されているようでした。
「いいね!」 1
so-oki
2020 年 2 月 5 日午前 12:44
#3
奇妙ですよね。
結局リリースされたversion 80.3987.87でも同様な事象が発生するようでした。
もともとこの事象を発見した時は非同期でviewの更新が走る処理があり、その時のngDoCheckとmarkAsPristineがバッティングしたようでした。
formGroupが多数配置されている画面などでは
form.patchValue({});
form.markAsPristine();
上記のようにformに値を入れてから未編集状態にするという処理を行っても発生するようです。
pathValueでのview更新とmarkAsPristineがぶつかってエラーとなっていると思われます。
これはGoogleに問い合わせてみるしかなさそうですかね。
so-oki
2020 年 2 月 7 日午前 1:46
#4
本日リリースされたAngular V9で現象が解消されたようです。
お騒がせしました。
結局根本原因は分からずじまいですが…
追記
すみません、解消はされていませんでした。
ただ、発生頻度は下がっているようです。
Githubに投稿されてましたね
opened 04:49PM - 06 Feb 20 UTC
🐞 bug report
Affected Package
The issue is caused by package @angular/....
Is this a regression?
Yes, the previous version in which this...
comp: forms
「いいね!」 1
so-oki
2020 年 2 月 14 日午前 10:12
#5
こちらchrome側のバグだったようで現在はパッチが当たっているようです。
https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
また、reduce関数のバグだったのでAngular9でもreduce関数を使わないようにする修正が入っています。
angular:master
← kara:forms-bug
opened 11:20PM - 11 Feb 20 UTC
お騒がせしました。
「いいね!」 1
ナイス追跡でした!Chrome側のバグでホッとしました