以反应形式管理多个复选框的“角度方式”是什么？

Question

我正在尝试找出管理 Angular 反应式表单中多个复选框的最佳方法。我希望复选框 value 一起发送，所以不是“on”或“true”，当我第一次尝试设置这些复选框时，我似乎得到了我认为 Angular 想要它们的方式。

我会有很多复选框，就像医生办公室一样，你必须填写任何医疗条件。对于我正在做的原型设计，我只是使用颜色，所以我想要在表单模型中最终得到的是这样的：

Colors: ['red', 'green', 'blue'];

我确实有这样的工作，但它似乎过于复杂，而不是真正的“角度方式”，因为我正在手动做事。

我的模板（使用

translate

管道进行国际化）：

{{ "step1.fields.colors.label" | translate }}
<ng-container *ngFor="let color of colors">
    <label>
        <input 
            type="checkbox"
            name="Colors"
            [value]="color"
            (change)="checkboxChange($event, 'Colors')">
        {{ "step1.fields.colors.options." + color | translate }}
    </label>
</ng-container>

您可能会注意到

(change)

事件处理程序而不是

formControlName

指令。

更改处理程序，基本上只是向 Colors 数组（在表单模型中）添加或删除 FormControl：

checkboxChange(event: Event, formModelKey: string) {
    const isChecked = (event.target as HTMLInputElement).checked;
    const value = (event.target as HTMLInputElement).value;
    const checkboxArray = <FormArray>this.form.get('step-1.' + formModelKey);

    if (isChecked) {
        checkboxArray.push(new FormControl(value));
    } else {
        let index = checkboxArray.controls.findIndex(checkbox => checkbox.value === value);
        checkboxArray.removeAt(index);
    }
}

这确实有效，但感觉有点奇怪，因为它是手动处理的。这似乎违背了反应式系统的目的。

另一个问题是，当您导航离开，然后返回到复选框页面时，颜色表单模型中的值不会像所有其他表单模型值一样在 UI 中恢复/反映。所以我必须手动恢复这些。这是我在原型中的做法，我称之为

ngAfterViewInit

。

populateSelectedCheckboxes() {
    if (this.selectedColors) {
        const checkboxArray = <FormArray>this.form.get('step-1.' + 'Colors');

        for (let control of checkboxArray.controls) {
            const checkboxes = document.querySelectorAll('input[type=checkbox][name=Colors]');
            checkboxes.forEach(checkbox => {
                if ((checkbox as HTMLInputElement).value === control.value) {
                    checkbox.setAttribute('checked', 'checked');
                }
            });
        }
    }
}

Answer 1

您可以使用 FormArray，它可以动态添加项目。在 template/html 中，您可以简单地遍历 FormArray 并为 FormArray 元素的每个 FormGroup 显示一个复选框。

form = this.formBuilder.group({
    colors: this.formBuilder.array([]),
    // All other controls added here aswell.
})