My question is when i check a checkbox i want to take the CategoryId below ill share my data and codes that i tried. Here is my data from database
{
"expires_in": 0,
"data": [
{
"categoryId": 11,
"categoryName": "Hepatic",
"hubxDataItems": [
{
"categoryId": 11,
"itemTitle": "AST(GOT)",
"itemValue": "35",
"itemUnit": "Units/L",
"isActive": true,
"isDeleted": false,
"createdDate": "2022-06-30T22:38:56.3825811",
"createdBy": 1,
"patientId": 40,
"categoryName": "Hepatic"
},
the code that i tried any changes should i make in this code.
<div class="profile-diagnos">
<div class="panel-body" *ngIf="hubxReportList.length===0">No records found</div>
<div class="example-headers-align">
<div *ngFor="let hubxReport of hubxReportList; let i=index">
<div class="lineheader ">
<section class="example-section" [formGroup]="patientReportForm">
<p><mat-checkbox color="primary" labelPosition="before" formControlname="hubxCategoryId" [value]="hubxReport.categoryId"
(change)="onChecked(hubxReport, $event)">{{hubxReport.categoryName}}</mat-checkbox></p>
<!-- <p class="headerfontsize">{{hubxReport.categoryName}}</p> -->
</section>
</div>
<div class="row paddingTop headerpaddingbottom">
<div *ngFor="let item of hubxReport.hubxDataItems" class="col-sm-4">
<mat-form-field class="example-full-width lineheight25 ">
<input matInput autofocus placeholder={{item.itemTitle}} [(ngModel)]="item.itemValue"
readonly />
{{item.itemUnit}}
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
this is my formcontrol :
this.patientReportForm = new FormGroup({
patientId: new FormControl(this.clientId),
hubxCategoryId : new FormControl(),
isTestApproved : new FormControl(),
notes : new FormControl(),
})
this is the function that i used to get the category id
onChecked(item: any, event: any){
let {checked, value} = event;
if(checked) {
this.checkedItems.push(value);
} else {
let index = this.checkedItems.indexOf(value)
if (index !== -1) this.checkedItems.splice(index, 1);
}
}