Usando este ejemplo en mi código: https://stackblitz.com/edit/angular-rskaug?file=src%2Fapp%2Fapp.component.html
HTML en componente
<td><input type="checkbox" (change)="onChange(employee.id, $event.target.checked)"></td>Texto mecanografiado en componente
onChange(id: any, isChecked: boolean) { const idFormArray = <FormArray>this.myForm.controls.employeeRelatedId; if (isChecked) { idFormArray.push(new FormControl(id)); } else { let index = idFormArray.controls.findIndex(x => x.value == id) idFormArray.removeAt(index); } }Detalle del error
La propiedad 'marcada' no existe en el tipo 'EventTarget'.
45 <input type="checkbox" (cambio)="onChange(employee.id, $event.target.checked)">
Dado que ya tiene un formulario reactivo en la plantilla, no estoy seguro de por qué esta input no es también parte de ella. Luego, podría usar algo como el valor de valueChanges observables del grupo de formularios para escuchar sus eventos.
Habiendo dicho eso, hay varias soluciones rápidas que podría probar.
Opción 1: variable de referencia de plantilla
Podría usar una variable de referencia de plantilla en el elemento <input> y capturar su propiedad checked en el argumento del controlador de eventos.
<input type="checkbox" #inputBox (change)="onChange(employee?.id, inputBox?.checked)"> Aquí el #inputBox es la variable de referencia de la plantilla.
Opción 2: deshabilitar la verificación de tipos
Puede deshabilitar la verificación de tipos usando la función $any() en la plantilla.
<input type="checkbox" (change)="onChange(employee?.id, $any($event.target)?.checked)"> ¿El operador de navegación segura ?. se utiliza para evitar posibles errores possibly undefined .
Actualización: ejemplo de trabajo
Ejemplo de trabajo: Stackblitz
$event.target es de tipo genérico EventTarget . TypeScript no es lo suficientemente inteligente como para reconocer que el evento se desencadenaría por la entrada y el tipo real sería HTMLInputElement . Puedes hacer tal cambio para superarlo:
<td><input type="checkbox" (change)="onChange(employee.id, $event.target)"></td> onChange(id: any, target: EventTarget | null) { const input = target as HTMLInputElement; const idFormArray = <FormArray>this.myForm.controls.employeeRelatedId; if (input.checked) { idFormArray.push(new FormControl(id)); } else { let index = idFormArray.controls.findIndex(x => x.value == id) idFormArray.removeAt(index); } }