issue in code "$event.target.checked" in angular 11

Question

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)">

Ceramal

Answer 1

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

Bochum

can you please provide a working example using stackbiz – Ceramal

Option 3: convert EventTarget to HTMLInputElement right? – Warrior

@MuhammadBilal It is good idea OP create stackblitz sample and other people forked the link! :) – Warrior

@Michaal D I just want to collect selected records related id(s) to perform delete operation on selected records. – Ceramal

@MuhammadBilal: I've updated the answer with a working example. – Bochum

@AlirezaAhmadi: If possible, could you please say how to convert to an HTMLInputElement in the template? It could be done in the controller as shown by @IAfanasov in his answer. – Bochum

@MichaelD you are right I mean in the controller. I said that this is options 3 for fixed the problem not in the template – Warrior

@MichaelD please help in another post: https://mcmap.net/q/1772511/-issue-in-delete-multiple-records-after-checbox-selection-angular-and-web-api/7186739 – Ceramal

Answer 2

$event.target is of generic type EventTarget. TypeScript is not smart enough to recognize that the event would be triggered by the input and the actual type would be HTMLInputElement. You can do such a change to overcome it:

<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);
    }
  }

Pedagogics

please see error using your code Error Detail: Argument of type 'EventTarget | null' is not assignable to parameter of type 'EventTarget'. – Ceramal

thanks for update, Muhammad! I changed the code to handle this error. It is due to strict type checking. While I find Option 1 from Michael's answer is better than my suggestion (: it is better to go with that – Pedagogics

I followed this example it still tells me eventTarget as checkbox has no checked property. – Radnorshire