get checkbox values in real time with a reactive form Angular - forms

Question

I have a list of country objects, that I access and use with my reactive form. I create each one as a form control dynamically, because this list will be changing. Then I attempt to get the form and values in real time (not using a submit button), as the checkboxes get clicked, by using the ngOnChanges hook. this is obviously not working, what hook should I use? on another note, is this a bad way to accomplish this? what would be a better approach?
component
export class GeoDropComponent implements OnInit, OnChanges {
countries = [
{
name : 'USA',
continent : 'north america'
},
{
name : 'Canada',
continent: 'north america'
}
];
countriesForm: FormGroup;
constructor() { }
ngOnInit() {
// add checkbox for each country
this.countriesForm = new FormGroup({});
for (let i = 0; i < this.countries.length; i++) {
this.countriesForm.addControl(
this.countries[i].name, new FormControl(false)
)
}
}
ngOnChanges() {
console.log(this.countriesForm);
}
}
html
<div class="geo-list">
<div class="content-box container">
<form [formGroup]="countriesForm">
<div class="country" *ngFor="let country of countries">
<input
type="checkbox"
formControlName="{{country.name}}"
>
{{ country.name }} | {{ country.continent }}
</div>
</form>
</div>
</div>

Answer 1

you can try like this. when ever search checkbox is selected or selected change method will update selected items
pseudo code
<input
type="checkbox"
formControlName="{{country.name}}"
(change)="search(country, $event)
>
component file.
selectedItems : any [] = [];
search(country, event) {
var index = this.selectedItems.indexOf(country.name);
if (event.target.checked) {
if (index === -1) {
this.selectedItems.push(country.name);
}
} else {
if (index !== -1) {
this.selectedItems.splice(index, 1);
}
}
}
}