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