jeudi 21 mars 2019

How to set the check box value in html using angular ts?

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