Forms 使用反应式表单实时获取复选框值

我有一个国家/地区对象列表，可以通过我的反应式表单访问和使用。我动态地将每个列表创建为表单控件，因为此列表将不断更改。然后，我尝试使用ngOnChanges钩子在单击复选框时实时获取表单和值（而不是使用submit按钮）。这显然不起作用，我应该用什么钩子？另一方面，这是实现这一目标的糟糕方式吗？什么是更好的方法

组成部分

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);
    }

}

导出类GeoDropComponent实现OnInit、OnChanges{
国家=[
{
名称：'美国'，
大陆：“北美”
},
{
名称：‘加拿大’，
大陆：“北美”
}
];
国家形式：FormGroup；
构造函数（）{}
恩戈尼尼特（）{
//为每个国家/地区添加复选框
this.countriesForm=新表单组（{}）；
for（设i=0；i

html

{{country.name}}{{country.continent}}

您可以这样尝试。选中“搜索”复选框或选中“更改方法”时，将更新所选项目

伪码

 <input
            type="checkbox"
             formControlName="{{country.name}}"
             (change)="search(country, $event)
                    >

---

如果选中复选框，您是否需要执行一些操作，因为您想捕获更改，或者您需要做什么？如果选中国家/地区，我需要一个true或false，以便在服务器中使用这看起来是一个很好的解决方案！我很感谢你的时间@Jonnysai。我将实现它，并让线程知道它是如何运行的。一个问题，我是否在ngOnChanges（）钩子中实现组件函数？我的html的（更改）部分由与输入标记相关的hook？change函数检测。无需使用ngOnChanges。

 <input
            type="checkbox"
             formControlName="{{country.name}}"
             (change)="search(country, $event)
                    >

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);
                }
            }

        }
    }