ngform 复选框选择数组提交

Question

我使用了一个利用 ngform 的步骤向导。在用户单击“下一步”并在本地保存用户选择后，直到表单在最后一步提交。

我在表单的第 1 步中引入了复选框。我可以建立一个新选择的复选框的数组，我还可以为表格的其余部分获得一个数组。我尝试将两者结合起来，但我的表单模型不喜欢它。

这是我迄今为止所做努力的叠加 - https://stackblitz.com/edit/angular-j7cu3x

主要问题 - 您会在上面的 stackblitz 中注意到，在第 1 步完成且复选框已被选中后，选择数组仍为空。

html - 复选框

<div *ngFor="let selection of intelSelections; let i=index">
  <label class="form-check-label">
    {{selection}}
  </label>
  <input class="form-check-input" [ngModel]="isSelected(selection)" (ngModelChange)="onChange(selection, $event)" type="checkbox" name="intelgroup_{{i}}">
</div>

component.ts - 复选框逻辑

isSelected(value: string): boolean {
    return this.selectedIntel.indexOf(value) >= 0;
}

onChange(value: string, checked: boolean) {
    console.log(value, checked);
    if (checked) {
        this.selectedIntel.push(value);
    } else {
        let index = this.selectedIntel.indexOf(value);
        this.selectedIntel.splice(index, 1);
    }
}

保存第 1 步

save(form: any): boolean {
    this.formDataService.setPersonal(this.personal);
    return true;
}

this.personal 是提交的表单上的另一个输入数据数组。

我可以看到两个选项：

1. 将this.selectedIntel 合并到this.personal
2. [ngModel]="isSelected(selection)" 了解如何将 personal.selection 添加到 ngModel。

Answer 1

将您的保存方法更新为：

save(form: any): boolean {
    this.personal.selection = this.selectedIntel;
    this.formDataService.setPersonal(this.personal);
    return true;
}