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