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

Abierto
  • ¿Algo no está bien?
#6,554 1 comentario 1 reacción 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
42/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
angular, typescript
Área
frontend

Línea de trabajo

Comienza con el value accessor de Angular generado por Stencil desde @stencil/angular-output-target y reproduce el problema usando Angular FormsModule, ngModel y un componente asociado a formularios con una propiedad value. Compara el comportamiento entre Stencil 4.35.3 y 4.36.0, centrándote en la ruta writeValue. Se considera terminado cuando los formularios controlados por plantilla actualicen el valor del host del componente web de forma coherente con los formularios reactivos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
13.2k
Forks
865
Merge medio
2 d 16 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de stenciljs/core

Todos los issues de stenciljs/core

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.