Issue
I want to get the values from my checkboxes but I can only get true or false.
Here is my template:
<h4>Categories</h4>
<div class="form-check" *ngFor="let cat of categories$|async">
<input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
<label class="form-check-label" for="{{cat.name}}">
{{cat.name}}
</label>
</div>
Here is my component
this.categories$ = this.storeService.getAllCategories().pipe(
map(result => (result as any).data),
tap(r => console.log(r))
)
My component basically gets a list of the categories from an external api
Solution
You can use change event with checkbox control like below,
<div class="form-check" *ngFor="let cat of categories$|async">
<input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}" (change)="onChangeCategory($event, cat)">
<label class="form-check-label" for="{{cat.name}}">
{{cat.name}}
</label>
</div>
From component.ts file,
tempArr: any = { "brands": [] };
onChangeCategory(event, cat: any){ // Use appropriate model type instead of any
this.tempArr.brands.push(cat.name);
}
Answered By - Srinivasan K K
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.