samedi 25 février 2023

Property 'checked' does not exist on type 'EventTarget'

I'm trying to collect all of the id's in an array from this checkbox list. I keep getting the error above telling me that checked does not exist on type EventTarget. This data used to populate the list group is input from a parent component. I want to be able to check the boxes to send the id array to function.

    <div class="overflow-auto" style="max-height: 25em;">
    <div class="p-3">
        <form [formGroup]="myForm" class="list-group">
            <li class="list-group-item" *ngFor="let credit of credits; let i = index">

                <input class="form-check-input me-2"
                       type="checkbox" 
                       #checkbox
                       (change)="onChange(credits[i].id, $event.target.checked)" />  // error happens here with .checked
                <label for=""> - <span class="text-muted"></span></label>


            </li>
            
        </form>
    </div>
</div>

Here is the component

    import { Component, Input, OnInit } from '@angular/core';
import { CastEntity } from '../movie-credits';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';


@Component({
  selector: 'app-connected-movies',
  templateUrl: './connected-movies.component.html',
  styleUrls: ['./connected-movies.component.css']
})
export class ConnectedMoviesComponent implements OnInit {

  @Input() credits!: any;

  myForm!: FormGroup

   
  constructor(private fb: FormBuilder) { 
    
  }

  ngOnInit(){
    this.myForm = this.fb.group({
      credits: this.fb.array([])
    });   
  }

  onChange(id: string, isChecked: boolean) {
    const creditsFormArray = <FormArray>this.myForm.controls.credits;
    
    if (isChecked) {
      creditsFormArray.push(new FormControl(id));
    } else {
      let index = creditsFormArray.controls.findIndex(x => x.value == id)
      creditsFormArray.removeAt(index);
    }
  }

 
}



Aucun commentaire:

Enregistrer un commentaire