Having trouble retrieving the values of selected checkboxes instead of displaying "Custom Category"? I've attempted to access the values and attributes with no success.
I'm aiming to display 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 at least 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"& Return gt;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 https://i.stack.imgur.com/NY1DG.png
Live: