Push object on array when checkbox is checked and remove object when checkbox is unchecked in angular 6

Question

I am new to angular 6.

I am trying to handle pushing and removing object from an array based on whether a checkbox is checked or not. So i am success to push object to array but How can I remove the same object from array when I uncheck the checkbox ? I also use formArray.

HTML Code Here

<form [formGroup]="editCategoryForm" > 
          <div class="form-group">
                  <mat-form-field>
                      <input matInput placeholder="Name"  formControlName="name" >
                  </mat-form-field>
              </div>
          <div formArrayName="categoryArray" >  
            <fieldset *ngFor="let address of editCategoryForm.controls.categoryArray['controls']; let i = index" >
              <div [formGroupName]="i" >
                  <div class="form-group">
                        <mat-form-field>
                          <input matInput placeholder="Label" formControlName ="label"  required>
                        </mat-form-field>
                   <br/>
                        <div class="check-box" *ngFor="let data of measurementData">
                              <input type="checkbox" (change)="onChange(i,data._id,data.name, $event.target.checked)" [checked]="inputChecked(i,data)" > {{data.name}}
                        </div> 
                        <div class="col-sm-1">
                            <button mat-mini-fab color="warn" *ngIf="editCategoryForm.controls.categoryArray['controls'].length > 1" title="Remove Fields" (click)="removeLair(i)">x</button>     
                        </div>

                  </div>
                </div>
            </fieldset> 
            <br/>
            <div class="form-group">
              <button mat-raised-button color="accent" (click)="addNew()">Add Measurement</button>
            </div>
            <div class="form-group">
                  <button style="float: right;margin: 29px;"  mat-raised-button color="primary" (click)="submitdata()">Submit</button>          
            </div>  
            </div>
        </form>

TS Code Here

onChange(index: number, _id: string, name: string, isChecked: boolean) {

    if (isChecked) {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.push({ id: _id, name: name });
    } else {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.pop({ id: _id, name: name });
    }
  }

Here is a Stackblitz demo.This Example is not working properly its remove object from last.

MonkeyScript · Accepted Answer · 2019-02-05 12:13:57Z

2

Try this,

HTML : Instead of passing each field, pass the whole object

<input type="checkbox" (change)="onChange(i,data, $event.target.checked)" [checked]="inputChecked(i,data)" >

TS : Use splice() instead of pop()

onChange(index: number, data:{_id:string,name:string}, isChecked: boolean) {
    if (isChecked) {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.push(data);
    } else {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.splice(this.editCategoryForm.controls.categoryArray.value[index].measurements.indexOf(data),1);
    }
}

answered Feb 5, 2019 at 12:13

MonkeyScript

5,1611 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anr241193 · Accepted Answer · 2019-02-05 12:11:19Z

2

You had used pop method which will always remove last element from your array. If you want to remove specific element from your array then use splice method. Please try this

onChange(index: number, _id: string, name: string, isChecked: boolean) {

    if (isChecked) {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.push({ id: _id, name: name });
    } else {
      this.editCategoryForm.controls.categoryArray.value[index].measurements.splice(index, 1);
    }
  }

answered Feb 5, 2019 at 12:11

anr241193

515 bronze badges

Comments

ashish pal · Accepted Answer · 2019-02-05 12:08:51Z

1

in place of pop you can try filter because pop will always remove element from last but by filter we can filter according to condition.

 onChange(index: number, _id: string, name: string, isChecked: boolean) {
        if (isChecked) {
this.editCategoryForm.controls.categoryArray.value[index].measurements.push({ id: _id, name: name });
        } else {
    //this.editCategoryForm.controls.categoryArray.value[index].measurements.pop({ id: _id, name: name });
    this.editCategoryForm.controls.categoryArray.value[index].measurements=this.editCategoryForm.controls.categoryArray.value[index].measurements.filter(item=>_id!==item.id);
        }
      }

here is stackblitz

answered Feb 5, 2019 at 12:08

ashish pal

4774 silver badges10 bronze badges

Collectives™ on Stack Overflow

Push object on array when checkbox is checked and remove object when checkbox is unchecked in angular 6

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related