angulartypescriptangular2-formsangular4-forms

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


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
  }

Solution

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