Question

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

我在表单的第1步中引入了复选框。我可以建立一个数组，其中包含新选中的复选框，其余的表单也可以得到一个数组。我尝试将两者结合起来，但是我的表单模型不喜欢它。

这是我到目前为止所做的努力-https://stackblitz.com/edit/angular-j7cu3x

主要问题-您会在上方的堆栈闪电中注意到，在完成第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)"了解如何向ngModel添加personal.selection。

Answer 1

将您的保存方法更新为：

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

ngform复选框选择数组提交

1 个答案: