Error en ngModel cuando strictTemplates es verdadero en angular 12.
Tengo un proyecto en Angular 12 que está dando un problema después de la notación strictTemplates
.
En mi componente tengo esta propiedad:
@Output('ngModelChange') ngModelChange: EventEmitter<any> = new EventEmitter<any>();
Cuando elimino la propiedad o pongo en tsconfig.json
"strictTemplates": false
, el componente funciona.
Mi componente reutilizable:
<xt-select xt-label="test" [xt-options]="[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' }
]" [(ngmodel)]="select2">
</xt-select>
Me gustaría saber cuál sería el problema, no me gustaría desactivar strictTemplates
que por defecto es true en Angular. Y por qué esta propiedad “output” está ocasionando esto cuando strictTemplates
está configurado en true.
Error:
La mitad de la propiedad y el evento en la unión bidireccional 'ngModel' no están enlazados al mismo destino.
node_modules/@angular/forms/forms.d.ts:3297:22
3297 export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
~~~~~~~
La mitad de la propiedad de la unión es al componente 'NgModel'.
davy.ai
El problema con el componente surge debido a la declaración
@Output('ngModelChange')
en la propiedadngModelChange
de tipo EventEmitter. Cuando el indicadorstrictTemplates
se establece en true, se aplica una comprobación estricta de las expresiones de plantilla para detectar incompatibilidades entre las propiedades y las vinculaciones de eventos. En este caso, el problema surge porque el componenteNgModel
espera que las mitades de la vinculación bidireccionalngModel
de la propiedad y el evento estén vinculadas al mismo destino. Sin embargo, la vinculación del eventongModelChange
no está vinculada al mismo destino que la vinculación de la propiedadngModel
.Una solución a este problema es cambiar el nombre de la propiedad
ngModelChange
para que coincida con la vinculación de la propiedadngModel
. Por ejemplo, cambiar el nombre de la propiedadngModelChange
angModel
resolvería el problema:Alternativamente, puedes actualizar la plantilla para vincular explícitamente el evento
ngModelChange
en lugar de usar la sintaxis de vinculación bidireccional:Utilizando las soluciones anteriores, puedes evitar establecer el indicador
strictTemplates
en false en el archivotsconfig.json
.