Using this example in my code: https://stackblitz.com/edit/angular-rskaug?file=src%2Fapp%2Fapp.component.html
Html in component
<td><input type="checkbox" (change)="onChange(employee.id, $event.target.checked)"></td>
Typescript in component
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);
}
}
Error Detail
Property 'checked' does not exist on type 'EventTarget'.
45 <input type="checkbox" (change)="onChange(employee.id, $event.target.checked)">
Given that you have a Reactive Form already in the template, I am not sure why this input
isn't also a part of it. Then you could use something like the form group's valueChanges
observable to listen to it's events.
Being said that, there are multiple quick fixes you could try.
Option 1: template reference variable
You could use a template reference variable in the <input>
element and capture it's checked
property in the event handler's argument.
<input type="checkbox" #inputBox (change)="onChange(employee?.id, inputBox?.checked)">
Here the #inputBox
is the template reference variable.
Option 2: disable type checking
You could disable type checking using $any()
function in the template.
<input type="checkbox" (change)="onChange(employee?.id, $any($event.target)?.checked)">
The safe navigation operator ?.
is used to avoid potential possibly undefined
errors.
Update: working example
Working example: Stackblitz