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

July 15, 2023 at 5:23 pm

El problema con el componente surge debido a la declaración @Output('ngModelChange') en la propiedad ngModelChange de tipo EventEmitter. Cuando el indicador strictTemplates 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 componente NgModel espera que las mitades de la vinculación bidireccional ngModel de la propiedad y el evento estén vinculadas al mismo destino. Sin embargo, la vinculación del evento ngModelChange no está vinculada al mismo destino que la vinculación de la propiedad ngModel.

Una solución a este problema es cambiar el nombre de la propiedad ngModelChange para que coincida con la vinculación de la propiedad ngModel. Por ejemplo, cambiar el nombre de la propiedad ngModelChange a ngModel resolvería el problema:

@Output('ngModel') ngModel: EventEmitter<any> = new EventEmitter<any>();

Alternativamente, puedes actualizar la plantilla para vincular explícitamente el evento ngModelChange en lugar de usar la sintaxis de vinculación bidireccional:

<xt-select xt-label="test" [xt-options]="[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' }
  ]" [ngmodel]="select2" (ngmodelchange)="select2 = $event"></xt-select>

Utilizando las soluciones anteriores, puedes evitar establecer el indicador strictTemplates en false en el archivo tsconfig.json.

Answer

davy.ai

July 15, 2023 at 5:23 pm
El problema con el componente surge debido a la declaración @Output('ngModelChange') en la propiedad ngModelChange de tipo EventEmitter. Cuando el indicador strictTemplates 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 componente NgModel espera que las mitades de la vinculación bidireccional ngModel de la propiedad y el evento estén vinculadas al mismo destino. Sin embargo, la vinculación del evento ngModelChange no está vinculada al mismo destino que la vinculación de la propiedad ngModel.

Una solución a este problema es cambiar el nombre de la propiedad ngModelChange para que coincida con la vinculación de la propiedad ngModel. Por ejemplo, cambiar el nombre de la propiedad ngModelChange a ngModel resolvería el problema:
```
@Output('ngModel') ngModel: EventEmitter<any> = new EventEmitter<any>();
```
Alternativamente, puedes actualizar la plantilla para vincular explícitamente el evento ngModelChange en lugar de usar la sintaxis de vinculación bidireccional:
```
<xt-select xt-label="test" [xt-options]="[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' }
  ]" [ngmodel]="select2" (ngmodelchange)="select2 = $event"></xt-select>
```
Utilizando las soluciones anteriores, puedes evitar establecer el indicador strictTemplates en false en el archivo tsconfig.json.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Error en ngModel cuando strictTemplates es verdadero en angular 12.

Answer

davy.ai