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

Aperta
  • Qualcosa non va?
#6,554 1 commento 1 reazione 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
42/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
angular, typescript
Ambito
frontend

Direzione di ricerca

Inizia con il value accessor Angular generato da Stencil da @stencil/angular-output-target e riproduci il problema usando Angular FormsModule, ngModel e un componente associato a un form con una proprietà value. Confronta il comportamento tra Stencil 4.35.3 e 4.36.0, concentrandoti sul percorso writeValue. Il lavoro è completato quando i form gestiti dal template aggiornano il valore dell'host del componente web in modo coerente con i form reattivi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
TypeScript
Stelle
13.2k
Fork
865
Merge medio
2g 16h
PR unite (30g)
29

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di stenciljs/core

Tutte le issue di stenciljs/core

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.