How to pass all checked checkbox values on Form Submit in angular 4/6/7
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);
}
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>