使用反应形式实时获取复选框值 Angular

Question

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

组件

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

你可以这样试试。 when ever search checkbox is selected or selected change method will update selected items

伪代码

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

        }
    }

使用反应形式实时获取复选框值 Angular

get checkbox values in real time with a reactive form Angular

forms

angular

angular-reactive-forms