Apologies if this EXACT question has been asked elsewhere as I've searched over the internet but I've found somewhat similar scenarios and their solutions but not one that I'm in search of. Hoping someone could assist me in this. So here goes,
I need to obtain the value of all the checkboxes that have been checked. The checkboxes are dynamically created based on the number of Array (assets) items
I am creating a form which uses ngFor to go through an array, and create checkboxes for each field. So what I've done is something like this,
<form>
<div class="row"><label>Assets</label></div>
<div *ngFor='let asset of assets' [(ngModel)]='assets'>
<div class="col-8"><input type="checkbox" name="{{asset}}" (change)="onChange()"></div>
<div class="col-35"><label>{{asset}}</label></div>
</div>
</form>
There are plenty of solutions outside but unfortunately everyone is ing with an example where the array is more like a Key:Value pair, for instance,
this.someArray = [
{id:1, name: someName, isSelect: false},
{id:2, name: someOtherName, isSelect: false}
]
I understand how to work with such kind of array structure but in my case, I have the following String Array,
assets: String[] = ['one', 'two', 'three'];
My question is, how can I get all the values that have been checked when I have just a simple Array of Strings. What I've done uptil now is something like this, assetponent.html
<form>
<div class="row"><label>Assets</label></div>
<div *ngFor='let asset of assets' [(ngModel)]='assets'>
<div class="col-8"><input type="checkbox" name="{{asset}}" (change)="onChange()"></div>
<div class="col-35"><label>{{asset}}</label></div>
</div>
</form>
assetponent.ts
export class AppComponent {
name = 'Angular ' + VERSION.major;
assets: String[] = ['one', 'two', 'three'];
onChange(): void {
alert(this.assets);
}
}
Any help will be greatly appreciated. Looking forward to hearing from you soon,
For references, here is the StackBlitz implementation (Not pleted yet) though,
/app/appponent.html
Kind Regards
Apologies if this EXACT question has been asked elsewhere as I've searched over the internet but I've found somewhat similar scenarios and their solutions but not one that I'm in search of. Hoping someone could assist me in this. So here goes,
I need to obtain the value of all the checkboxes that have been checked. The checkboxes are dynamically created based on the number of Array (assets) items
I am creating a form which uses ngFor to go through an array, and create checkboxes for each field. So what I've done is something like this,
<form>
<div class="row"><label>Assets</label></div>
<div *ngFor='let asset of assets' [(ngModel)]='assets'>
<div class="col-8"><input type="checkbox" name="{{asset}}" (change)="onChange()"></div>
<div class="col-35"><label>{{asset}}</label></div>
</div>
</form>
There are plenty of solutions outside but unfortunately everyone is ing with an example where the array is more like a Key:Value pair, for instance,
this.someArray = [
{id:1, name: someName, isSelect: false},
{id:2, name: someOtherName, isSelect: false}
]
I understand how to work with such kind of array structure but in my case, I have the following String Array,
assets: String[] = ['one', 'two', 'three'];
My question is, how can I get all the values that have been checked when I have just a simple Array of Strings. What I've done uptil now is something like this, asset.ponent.html
<form>
<div class="row"><label>Assets</label></div>
<div *ngFor='let asset of assets' [(ngModel)]='assets'>
<div class="col-8"><input type="checkbox" name="{{asset}}" (change)="onChange()"></div>
<div class="col-35"><label>{{asset}}</label></div>
</div>
</form>
asset.ponent.ts
export class AppComponent {
name = 'Angular ' + VERSION.major;
assets: String[] = ['one', 'two', 'three'];
onChange(): void {
alert(this.assets);
}
}
Any help will be greatly appreciated. Looking forward to hearing from you soon,
For references, here is the StackBlitz implementation (Not pleted yet) though,
https://stackblitz./edit/angular-ivy-jtnzhp?file=src/app/app.ponent.html
Kind Regards
Share Improve this question edited Mar 18, 2022 at 3:58 NeNaD 20.5k11 gold badges61 silver badges114 bronze badges asked Mar 18, 2022 at 3:21 rac3b3nn0nrac3b3nn0n 8812 gold badges14 silver badges29 bronze badges 2- Are you using Angular Material checkbox or native checkbox input element as in the Stackblitz example? – NeNaD Commented Mar 18, 2022 at 3:33
- I would remend you to take a look at this angular.io/guide/reactive-forms#creating-dynamic-forms first, you could instead of the button for adding more just do it based on the data you want to add to the form. – Henrik Bøgelund Lavstsen Commented Mar 18, 2022 at 3:33
2 Answers
Reset to default 4You can do something like this:
HTML file:
<div *ngFor="let asset of assets">
<input (change)="onChange(asset)" type="checkbox" value="{{ asset }}" />{{asset}}
</div>
TypeScript file:
assets: string[] = ['one', 'two', 'three'];
all_selected_values: string[] = [];
onChange(value: string): void {
if (this.all_selected_values.includes(value)) {
this.all_selected_values = this.all_selected_values.filter((item) => item !== value);
} else {
this.all_selected_values.push(value);
}
console.log(this.all_selected_values);
}
Working example
Let's say you want to pass the property name of this.someArray, what you can do is something like this:
(change)="onChange(asset.name)"