How to pass all checked checkbox values on Form Submit in angular 4/6/7

Question

I want to fetch all checked items of a form in component without using change() or click() function as it is unable to fetch already checked items.

Here is my Array in TS:

  PartyRoles = [
    {
     Id: 1,
     Name: "Vendor",
     Checked: true
    },
    {
      Id: 2,
      Name: "Client",
      Checked: true
    },
    {
      Id: 3,
      Name: "Consigner",
      Checked: false
    }       
  ]

My HTML Form:

<form (ngSubmit)="editPartyRolesSubmit()">
    <div *ngFor="let item of PartyRoles">
        <label>
        <input type="checkbox" value="{{item.Id}}" [attr.checked]="item.Checked==true ? true : null" [attr.disabled]="item.Id==1 ? true : null" />
        <span innerHTML="{{item.Name}}"></span>
       </label>
    </div>
</form>

My onSubmit function in which I want to get all the checked values:

  editPartyRolesSubmit= function () {
    // Please suggest how to fetch checked items
  }

Answer 1

You could use Form and NgModel

<form #checkboxForm="ngForm" (submit)="editPartyRolesSubmit()">
    <div *ngFor="let item of PartyRoles">
        <label>
        <input type="checkbox" value="{{item.Id}}" [(ngModel)]="item.Checked" [name]="item.Name" [attr.disabled]="item.Id==1 ? true : null" />
        <span innerHTML="{{item.Name}}"></span>
    </label>
    </div>
    <input type="submit" value="Submit">
</form>

function can be

editPartyRolesSubmit() {
  console.log(this.PartyRoles);
}

Answer 2

You can create a separate array for selected Items

let SelectedList=[]
for(let i=0;i<PartyRoles.length;i++){
 if(PartyRoles[i].checked){
  SelectedList.push(PartyRoles[i]);
 }
}

Answer 3

Change your Html to following :

<form (ngSubmit)="editPartyRolesSubmit()">
    <div *ngFor="let item of PartyRoles">
        <label>
        <input type="checkbox" value="{{item.Id}}" 
               [checked]="item.Checked" 
               (change)="item.Checked = !item.Checked" 
               [attr.disabled]="item.Id==1 ? true : null" />
        <span innerHTML="{{item.Name}}"></span>
       </label>
    </div>
</form>

Your PartyRoles will remain updated with latest checkbox values. You can access it like this as an example:

  editPartyRolesSubmit(){

    // Access each item like this in PartyRoles
    this.PartyRoles.forEach(role=>{
      console.log('Id: ' + role.Id + ', Name: ' + role.Name + ', Checked: ' + role.Checked);
    });

    // Or like this 
    let role = this.PartyRoles.find(x=>x.Id === 1);
    if(role !== undefined){
      console.log(role);
    }

    // Or a filetered list 
    let checkedRoles = this.PartyRoles.filter(x=>x.Checked === true);
    console.log(checkedRoles);

    // Or by array index
    let roleTwo = this.PartyRoles[2];
    console.log(roleTwo);

  }

You dont have to use the function keyword with you method. Here is a link to working demo.

Answer 4

You can use this:

<form (ngSubmit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles; let i = index">
    <label>
    <input type="checkbox"
           [attr.checked]="item.Checked == true ? true : null"
           (change)="item.Checked = !item.Checked"
           [attr.disabled]="item.Id==1 ? true : null" />
    <span innerHTML="{{item.Name}}"></span>
   </label>
</div>
<button type="submit">Click</button>
</form>

Or:

<form (submit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
    <label>
    <input type="checkbox" value="{{item.Id}}" [(ngModel)]="item.Checked" [name]="item.Name" [attr.disabled]="item.Id==1 ? true : null" />
    <span innerHTML="{{item.Name}}"></span>
</label>
</div>
<button type="submit">Click</button>
</form>

Answer 5

Another way,

in your html

 <li *ngFor="let course of courses.ugreg">
              <mat-checkbox [checked]="course.checked" [(ngModel)]="course.checked" name="course.name">
                {{course.name}}
              </mat-checkbox>
            </li>

in your typescript

selectedcourses = [];

courses: Courses = {
name: 'Courses',
checked: false ,
ugreg: [
  { name: 'B Com(Computer)*',checked: false},
  { name: 'B Com(Marketing)*', checked: false},
  { name: 'BBA*', checked: false },
  { name: 'BCA**', checked: false }
],
};

and in your form submit button method

onSubmit() {
this.courses.ugreg.forEach(x => { if (x.checked) { this.selectedcourses.push(x.name); } 
 })