how to accept multiple checked checkbox in Angular?

Question

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);
      }  
    }
  )
}

Sorry, it's too difficult to read your english (no offense). Could you describe your issue in a single sentence to help me ? — user4676340
– user4676340, Commented Sep 7, 2018 at 12:57

Theophilus Omoregbee · Accepted Answer · 2018-09-07 13:26:03Z

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

Collectives™ on Stack Overflow

how to accept multiple checked checkbox in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related