Currently, I am creating a list of checkboxes with distinct string values: heading, paragraph, list, table, visualtitle. I believe the current approach using
(change)="onChange('heading', $event.target.checked)name="annotationtype" field to access the checked values in other areas. How can I retrieve these values?
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="widget-container">
<label class="checkbox-label"><input type="checkbox" name="annotationtype" (change)="onChange('heading', $event.target.checked)" />Heading</label>
<label class="checkbox-label"><input type="checkbox" name="annotationtype" (change)="onChange('paragraph', $event.target.checked)" />Paragraph</label>
<label class="checkbox-label"><input type="checkbox" name="annotationtype" (change)="onChange('list', $event.target.checked)" />List</label>
<label class="checkbox-label"><input type="checkbox" name="annotationtype" (change)="onChange('table', $event.target.checked)" />Table</label>
<label class="checkbox-label"><input type="checkbox" name="annotationtype" (change)="onChange('visualtitle', $event.target.checked)" />Visual Title</label>
</div>
</form>
onChange(name: string, isChecked: boolean) {
if (!this.urlhash)
{
alert("Query URL cannot be empty!!!");
}
else
{
if (isChecked) {
this.checkedAnnotations.push(new FormControl(name));
} else {
const index = this.checkedAnnotations.controls.findIndex(x => x.value === name);
this.checkedAnnotations.removeAt(index);
}
var url = `/sd_api/htmlview/${this.urlhash}/highlighted.html?annotypes=${this.checkedAnnotations.value.join()}&datasource=${this.datasource}`;
console.log(url);
this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}