ngform复选框选择数组提交

Question

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

我在表单的第 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 是提交的表单上的另一个输入数据数组。

我可以看到两个选项：

合并 this.selectedIntel 到 this.personal
[ngModel]="isSelected(selection)" 找出如何将 personal.selection 添加到 ngModel。

Answer 1

将您的保存方法更新为：

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

ngform复选框选择数组提交

ngform checkbox selection array submission

angular

typescript

angular-forms