lundi 18 octobre 2021

make checkboxes checked depending on database values in angular

I am showing multiple checkboxes depending on database fetched values. And I need to make them checked from stored values.

Template code

 <div class="col-lg-12">
                <div class="form-group">
                  <label class="w-100">Type of events <b style="color: red">*</b></label>
                  <div class="pretty_wrapper">
                    <div class="pretty p-default"  *ngFor="let event of EventTypes index as i">
                      <input type="checkbox" 
                      [name] = "'EventType_'+event.id" 
                      [value]="event.id" 
                      (change)="onCheckboxChange($event)"
                      
                      />
                      <div class="state d-flex"  >
                        <label>  </label>
                      </div>
                    </div>
                  </div>
                  <div class="text-danger" *ngIf="submitted && this.form.controls['checkArray'].errors?.required" >
                    Event type is required, select atleast one value.
                  </div>

                </div>
              </div>

component code

EventTypes: any = [];
  selectedEventIds:any = [];
...
 this.userService.getEventType().subscribe((data) => {
      console.log(data);
      this.EventTypes = data.data;
    });
....
 if (results['status'] === true) {

for (let event_type of results.data.event_type) {
              this.selectedEventIds.push(event_type.event_type_id);
            }
...

First I am showing database default elements in checkboxes by iterating EventTypes . And storing user selected value. I am fetching those selected values in selectedEventIds. Now I need to make checkboxes checked if id and fetched value matches.

I tried by adding [attr.checked]="selectedEventIds[i] === event.id ? true : null" but its not working.

Somehow I need to check each value of selectedEventIds with current event.id. How I can do that in angular? Is there any other way to make checkbox checked depending on database values?

Please guide and help. Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire