0

I wanted to print the values of selected checkboxes instead of "Custom Category". I have tried to get value, attribute but not getting the values.

I wanted to print the values of the selected checkbox.

app.component.html

<form #myForm="ngForm">
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl1" required #dl="ngModel" value="DL1" ngModel name="dl">
<label class="form-check-label" for="">DL 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl2" required #dl="ngModel" value="DL2" ngModel name="dl">
<label class="form-check-label" for="">DL 2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl3" required #dl="ngModel" value="DL3" ngModel name="dl">
<label class="form-check-label" for="">DL 3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl4" required #dl="ngModel" value="DL4" ngModel name="dl">
<label class="form-check-label" for="">DL 4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dl5" required #dl="ngModel" value="DL5" ngModel name="dl">
<label class="form-check-label" for="">DL 5</label>
</div>
<div *ngIf="dl.invalid" class="error">Please select atleast one DL.</div>
</div>
<div class="form-group">
<label>Comments</label>
<textarea name="comments" #comments="ngModel" required class="form-control" ngModel id="" cols="5" rows="5"></textarea>
<span *ngIf="comments.invalid && comments.touched" class="error">Please provide your comments.</span>
</div>
<div class="form-group">
<button type="submit" [disabled]="myForm.invalid" class="btn btn-primary btn-sm" (click)="addSubData(myForm.value)">Submit</button>
<button type="button" class="btn btn-secondary btn-sm ml-2" (click)="cancelAddUser()">Cancel</button>
</div>
</form>

app.component.ts

addSubData(user: any) {
let newData = this.userObj.assigned_to;
let i: any;
i = document.querySelectorAll('input[type="checkbox"]:checked').length;
for (let j=1; j<=i; ++j) {
newData.push(user);
user.dl = "Custom Category";
console.log(user.dl); 
}
user.sub_impact = "Applicable";
user.co_score = "Added";
this.commonService.updateUser(this.userObj).subscribe(()=> {
this.getLatestUser();
});
}

Output enter image description here

Live: https://angular-ivy-ysaulb.stackblitz.io/

Kunal Vijan
  • 425
  • 2
  • 9
  • 28
  • " I wanted to show the value DL1/DL2/DL3/DL4/DL5" what is that meaning..can you explain more – Janitha Rasanga Dec 23 '20 at 13:58
  • @JanithaRasanga this is the value of each checkbox. I wanted to display the value instead of true. The ask here is: If a user has selected 4 checkboxes then add 4 rows in the record along with the selected checkboxes values. – Kunal Vijan Dec 23 '20 at 14:04
  • @JanithaRasanga based on the number of checked checkboxes and click on submit, add those many rows – Kunal Vijan Dec 23 '20 at 14:06

2 Answers2

1

According to specs, an input type="checkbox" has two values (true/false). It even warns about preset "values". You've two ways to get what you ask for:

  1. Use element.id.toUpperCase()
  2. Use Data attributes
netizen
  • 1,028
  • 7
  • 19
  • I am trying to figure out how to use in the above code. So, on the checkbox, I will add a data-name="DL1" and read the same in function and push? – Kunal Vijan Dec 23 '20 at 16:30
  • Somewhere you have a reference to the input (where you were getting its value property, lets asume el, and el.value, just change el.value to el.dataset.name – netizen Dec 23 '20 at 17:54
0

will this small example help?

const test = () => {
    const selected = [...document.querySelectorAll('input[type="checkbox"]:checked')].map(cb => {
    return cb.value;
    });
  console.log(selected);
}
<input class="form-check-input" type="checkbox" id="dl1" required #dl="ngModel" value="DL1" ngModel name="dl">
<label class="form-check-label" for="">DL 1</label>
<input class="form-check-input" type="checkbox" id="dl2" required #dl="ngModel" value="DL2" ngModel name="dl">
<label class="form-check-label" for="">DL 2</label>
<button onclick="test()">Test</button>
D. Seah
  • 4,472
  • 1
  • 12
  • 20
  • `for (let j=1; j<=k; ++j) { this.userObj.assigned_to.push(user); user.dl = "Custom Category"; }` right now for all user.dl it's setting text as custom category. i am not getting user.dl.value. can you help me to incorporate the same in typescript function addSubData() https://stackblitz.com/edit/angular-ivy-d2gbad. @d-seah that would be really helpful – Kunal Vijan Dec 24 '20 at 07:11
  • https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_order similar to this but in ts – Kunal Vijan Dec 24 '20 at 08:47
  • https://stackoverflow.com/questions/63797930/get-multiple-checkbox-value-as-an-array-in-angular/63799360#63799360 – Eliseo Dec 24 '20 at 09:34