Push only checked and not duplicated checkbox values to an array in Angular?

Question

I have three checkboxes and I want to create an array which should have the values of the checked checkboxes values and should avoid pushing duplicating values.

This is what I have tried but values are pushing even though it is checked or not.

Can someone let me know what is the issue here?

.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>

Post the rest of your work (The whole component). – ShanieMoonlight Feb 17 '22 at 10:57 — ShanieMoonlight, Feb 17 '22 at 10:57
I added the rest of the things now :) – Kalana Tebel Feb 17 '22 at 16:14 — Kalana Tebel, Feb 17 '22 at 16:14

Eliseo · Answer 1 · 2022-02-18T07:58:14.480

the idea is from this SO (the part of the simple e.g. with a variable). You simply change the variable "answer" by the formControl.

<div *ngFor="let option of options">
  <input
    #check
    type="checkbox"
    [checked]="compsForm.get('dataSource').value &&
               compsForm.get('dataSource').value.indexOf(option) >= 0"
    (change)="onChange(option, check.checked)"
  />

  {{ option }}
</div>

  options=["check 1","check 2","check3"]
  compsForm: FormGroup = new FormGroup({

    dataSource: new FormControl('', Validators.required),
    name: new FormControl('',Validators.required),
  });
  onChange(option:string,checked:boolean)
  {
     let answer=this.compsForm.get('dataSource').value || [];
     if (checked && answer.indexOf(option)<0)
     {
         answer=[...answer,option]
         .sort((a,b)=>this.options.indexOf(a)>this.options.indexOf(b)?1:-1)
         //we can also not sort the array
         //answer=[...answer,option]
     }

    if (!checked)
          answer=answer.filter(x=>x!=option)

    this.compsForm.get('dataSource').setValue(answer.length?answer:null)
  }

the stackblitz

NOTE: If you want simply the code you can use a getter

get dataSourceValue(){
   return this.compsForm.get('dataSource').value
}

Update options as array with value and label

If we has some like

options2 = [
    { value: 'check1', label: 'Check 1' },
    { value: 'check2', label: 'Check 2' },
    { value: 'check3', label: 'Check 3' },
  ];

We need change a few the code

<div *ngFor="let option of options2">
  <input
    #check
    type="checkbox"
    [checked]="compsForm2.get('dataSource').value &&
               compsForm2.get('dataSource').value.indexOf(option.value) >= 0"
    (change)="onChange2(option.value, check.checked)"
  />
  {{ option.label }}
</div>

See how we pass to the function option.value and ask about .value.indexOf(option.value)

Our function change becomes

  onChange2(option: string, checked: boolean) {
    let answer = this.compsForm2.get('dataSource').value || [];
    if (checked && answer.indexOf(option) < 0) {

      //we use "optionsValue" for easy sort
      const optionsValue = this.options2.map((x) => x.value);

      answer = [...answer, option].sort((a, b) =>
        optionsValue.indexOf(a) > optionsValue.indexOf(b) ? 1 : -1
      );
      //we can also not sort the array
      //answer=[...answer,option]
    }

    if (!checked) answer = answer.filter((x) => x != option);

    this.compsForm2.get('dataSource').setValue(answer.length ? answer : null);
    this.compsForm2.get('dataSource').markAsTouched();
  }

ShanieMoonlight · Answer 2 · 2022-02-17T20:38:00.137

Some things to consider:

The formGroup in your ts should match the "shape" of the form in the html. If the html form has 3 inputs then so should the formGroup. The html should have different names on each input.

You were only pushing elements in your array and not removing them when unchecked so the array will just keep getting bigger.

When you're worried about duplicate entries it is often better to work with a "Set" and the convert the set to an array when you have done all your work.

CHeck out this SO answer: HashSet Explanation

.html

    <form [formGroup]="compsForm">
  <input
    type="checkbox"
    name="om"
    (change)="dataSourceChange($event)"
    formControlName="dataSource1"
  />
  <span> OM</span>
  <input
    type="checkbox"
    name="fe"
    (change)="dataSourceChange($event)"
    formControlName="dataSource2"
  />
  <span> FE</span>
  <input
    type="checkbox"
    name="be"
    (change)="dataSourceChange($event)"
    formControlName="dataSource3"
  />
  <span> BE </span>
</form>

.ts

     // private _dataSource: any[] = [];
  private _dataSet: Set<string> = new Set<string>();
  private _dataArray = [];

  compsForm: FormGroup = new FormGroup({
    dataSource1: new FormControl(''),
    dataSource2: new FormControl(''),
    dataSource3: new FormControl(''),
  });

  dataSourceChange(event: any) {
    console.log(event.target.name);

    const name = event.target.name;
    const isChecked = event.target.checked;

    if (isChecked) this._dataSet.add(name);
    else this._dataSet.delete(name);

    this._dataArray = Array.from(this._dataSet);
    console.log(this._dataArray);
  }

Push only checked and not duplicated checkbox values to an array in Angular?

2 Answers2