CODEWITHSUNDEEP
angularcheckbox
Dharmesh
Dharmesh

Reputation: 6003

how to accept multiple checked checkbox in Angular?

I have multiple checked checkbox which comes in(ngOninit).now i edit this checked checkboxes and sometimes i without edit i save checkboxes that time it makes this.checklist empty but there where some checkbox is checked so when i not edit checkboxes that time how to put default checked checkboxes in this.checkedlist or any other solution is there is appreciated.

<label *ngFor="let statusCategoryObj of statusCategoryObj">
 <mat-checkbox value="{{statusCategoryObj.categorytitle}}" name="categories"
   [checked]="checkedCategories(statusCategoryObj.id)" (change)="onCheckboxChange(statusCategoryObj,$event)">
    {{statusCategoryObj.categorytitle}}</mat-checkbox>
</label>
<button mat-raised-button (click)="updateStatusDetailsById({'id':this.editStatusObj.id})">SAVE</button>

edit-status.component.ts

ngOnInit(){
  this.statusService.editStatusDetailsById({'id': id}).subscribe(
    (data) => {
      if(data.status == 28){
        this.editStatusObj.id = data.payload[0].id;
        this.editStatusObj.categories = data.payload[0].categories;
        this.allCategories = this.editStatusObj.categories.split(',');
      }        
    }
  )
}

checkedCategories(id){
  for(var i = 0 ; i < this.allCategories.length; i++){
    if(id == this.allCategories[i]){
      return true;
    }
  }  
  return false;
}

onCheckboxChange(statusCategoryObj, event) {
  if(event.checked) {
    this.checkedList.push(statusCategoryObj.id);
  }else{
    for(var i=0 ; i < this.statusCategoryObj.length; i++) {
     if(this.checkedList[i] == statusCategoryObj.id){
       this.checkedList.splice(i,1);
     }
    }
  }
}

updateStatusDetailsById(id){
  const formData = new FormData();
  formData.append('categories',this.checkedList.toString());
  this.statusService.updateStatusDetailsById(formData).subscribe(
    (data) => {
      if(data.status == 29){
        console.log(data.payload);
      }  
    }
  )
}

Upvotes: 0

Views: 83

Answers (1)

Theophilus Omoregbee
Theophilus Omoregbee

Reputation: 2503

From what you are trying to do is to keep a list of checked boxes and also setting default checkbox value.

From the code below it will assume you loaded the default value from somewhere and then checking those automatically for you in the ngOnInit function 

import { Component, OnInit } from '@angular/core'; 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  form: FormGroup;
  notifications:Array<{name:string, checked:boolean}> = ['Post', 'Email', 'SMS', 'Pick Up', 'Other'].map(item => ({name: item, checked: false}))
  loadedNotifications = ['Post', 'Email']


  constructor() {
  }

  ngOnInit() {
    // assumed loadedNotifications came from an asynchronous process
    this.loadedNotifications.forEach(loaded => {
      const notification = this.notifications.find(item=> item.name === loaded)
      if(notification){ 
        notification.checked = true
      }
    })
  }

  submit() {
    const param = this.notifications.filter(item => item.checked).map(item => item.name)
    console.log('param', param)
  }
}

The template file is like so, observe the (change) function where we toggle the checked field for each item 

<form (ngSubmit)="submit()" novalidate>

    <div>
        <p>Kindly indicate how you would want your </p>
        <p>Notification of transfer to be dispatched</p>
        <p>to you: </p>
    </div>
    <ul>
        <li *ngFor="let item of notifications">
            <label>{{item.name}}</label>
            <input type='checkbox' (change)="item.checked = !item.checked" [checked]="item.checked" />
        </li>
    </ul>


    <button type="submit">
        Send
      </button>
</form>

Here is the code running: https://stackblitz.com/edit/angular-pv3pyk

Upvotes: 3

Related Questions