I need assistance with creating an array from three checkboxes. The array should only contain the values of the checked checkboxes and should not include duplicates.
I have attempted to achieve this functionality, but the values are still being added regardless of whether they are checked or not.
If anyone can identify the issue in my code, I would appreciate it.
.ts
public dataSource: any[] = [];
compsForm: FormGroup = new FormGroup({
dataSource: new FormControl('', Validators.required),
name: new FormControl('',Validators.required),
});
dataSourceChange(event:any){
var name = event.target.name;
var isChecked = event.target.checked;
const index = this.dataSource.findIndex((el) => el.id === name);
if (index > -1) {
this.dataSource[index].isChecked = isChecked;
} else {
this.dataSource.push(name);
}
this.dataSource = [...this.dataSource];
console.log(this.dataSource);
}
.html
<form [formGroup]="compsForm">
<input type="checkbox" name="om" (change)="dataSourceChange($event)" formControlName = "dataSource"> <span> OM</span>
<input type="checkbox" name="fe" (change)="dataSourceChange($event)" formControlName = "dataSource"> <span> FE</span>
<input type="checkbox" name="be" (change)="dataSourceChange($event)" formControlName = "dataSource"> <span> BE </span>
</form>