Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

741
Visualizações
issue in code "$event.target.checked" in angular 11

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

over 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

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

over 4 years ago · Santiago Trujillo Relatório

0

$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);
    }
  }
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda