I am trying to set the checkbox dynamically with the value I got from an API call. From the API call the received output is [11,12,13] so Voice Call, SMS and Auto Dailer have to be checked. I have set the value like (11,12,13,... ) for each boxes. While submitting the form i have selected the checkboxes 11,12,13. So while loading another page, i have to set these checkboxes to true. Please look at my code below.
In ts File:
modeOfCommunicationData = new Map([[11, 'Voice Call'], [12, 'SMS'],
[13, 'Auto Dailer'], [14, 'Dailer Agent'], [15, 'Robo']]);
The API call to get the checkbox value:
loadModeComm_Category(templateId){
if (templateId != null ) {
console.log("template ID :", templateId)
this.tms.GetModeAndCategoryByTemplate(templateId) // tms is the object for the API call from service.ts
.subscribe(r => {
this.records = r;
console.log("onSelectHeaderComm :", this.records);
let recordData = this.records;
recordData = recordData.map((val) => {
this.modeOfComm = val.Record.ModeOfCommunication;
console.log("modeOfComm :", this.modeOfComm)//the output is [11,12,13]
this.modeOfComm.forEach((opt,key) => { // trying to set the checkboxes to true
if(key == arval)
mocCheckbox.controls[opt].setValue(true);
});
});
})
}
}
HTML:
<div class="col-sm-12">
<div class="sub-title">
<p> <strong> Mode of Communication </strong> </p>
</div>
<div class="communication-checkbox-box" formGroupName="modeOfComm">
<mat-checkbox color="primary" id="mocSelectAll" (change)="onChangeSelectAll($event)"
[(ngModel)]="mocCheck" [ngModelOptions]="{standalone: true}"> Select All </mat-checkbox>
<div *ngFor="let option of Form.get('modeOfComm').value | keyvalue : customOrder">
<mat-checkbox color="primary" [formControlName]="option.key" (change)="mocDeSelect($event)"
[value]="option.value"> </mat-checkbox>
</div>
</div>
</div>
Please help me in resolving this issue. It could be better if i get an working code. Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire