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