bug: Two-way binding broken between Angular template-driven forms and Stencil

オープン
  • 何か問題がありますか？
#6,554 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
42/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
angular, typescript
領域
frontend

調査の方向性

@stencil/angular-output-target から生成された Stencil の Angular value accessor から始め、Angular FormsModule、ngModel、および value プロパティを持つフォーム関連コンポーネントを使って問題を再現します。Stencil 4.35.3 と 4.36.0 の動作を比較し、writeValue パスに注目します。テンプレート駆動フォームが、リアクティブフォームと一貫した形で Web コンポーネントのホストの value を更新すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

ionitron: needs reproduction
Prerequisites
Stencil Version

4.36.0-current

Current Behavior

When using Stencil’s Angular value accessor, the writeValue method is invoked as expected and receives the correct value from the Angular form. However, the underlying logic responsible for applying this value to the Stencil web component (i.e., writing to the host component’s value property) does not appear to execute correctly. As a result, the value is not actually set on the host component. This issue only occurs when using Angular Template-driven forms; Reactive forms continue to function as expected. This behavior appears to be a regression introduced in Stencil v4.36.0 and later versions, as the same setup works correctly in v4.35.3.

Expected Behavior

When using Stencil’s Angular value accessor with template-driven forms, the value provided by Angular (via ngModel) should be correctly propagated through the writeValue method and applied to the Stencil web component by updating the host component’s value property. The component should remain fully synchronized with the form state, behaving consistently with reactive forms and with prior Stencil versions (e.g. v4.35.3), where this integration worked as expected.

System Info
Platform: windows (10.0.26100)
   CPU Model: Intel Xeon Processor (Icelake) (4 cpus)
    Compiler: C:\dev\projects\design-system\node_modules\@stencil\core\compiler\stencil.js
       Build: 1752598220
     Stencil: 4.36.0
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0
Steps to Reproduce
  1. Create a form-associated Stencil web component (using ElementInternals) that exposes a value property (e.g. a text input–like component).
  2. Enable Angular support for the component and use the Stencil-generated Angular value accessor for a text-type value.
  3. Build the Stencil component and include it in an Angular application.
  4. In Angular, create a template-driven form using FormsModule.
  5. Use the Stencil web component inside the template-driven form and bind it with ngModel, for example:
<my-text-field [(ngModel)]="modelValue" name="field"></my-text-field>
  1. Initialize or update modelValue from the Angular component class.
  2. Observe that the Angular value accessor’s writeValue method is called with the correct value.
  3. Observe that the value is not written to the Stencil web component’s host element (the component’s value property is not updated) - using lifecycle hooks also doesn't seem to do the job as the value is not even received in any of them.
Code Reproduction URL

to-be-added

Additional Information
  • I've tested the subsequent versions since v4.35.3 and they all seem to suffer from the same issue;
  • Used @stencil/[email protected] to generate all Angular related code - also tested with later versions, the issue seems to persist.
主要言語
TypeScript
スター
13.2k
フォーク
865
平均マージ
2日 16時間
マージ済み PR（30日）
29

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

stenciljs/core のほかの issue

stenciljs/core の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。