Представление массива выбора флажка ngform

Question

Я использовал пошаговый мастер, использующий ngform. После того, как пользователь нажимает «Далее», и это локально сохраняет выбор пользователей, пока форма не будет отправлена ​​на последнем шаге.

Я установил флажки для шага 1 формы. Я могу создать массив новых выбранных флажков, а также получить массив для остальной части формы. Я попытался объединить два, но моей модели формы это не нравится.

Вот мой стек пока что - https://stackblitz.com/edit/angular-j7cu3x

main Issue - вы заметите в стеке выше, что после завершения шага 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;
}