Как вернуть все проверенные и непроверенные значения из списка флажков?

Question

stackblitz Пример Я создаю список флажков, используя следующие объекты данных:

data = [
 { Key: "class_id", displayName: "Section ID", enabled: true },
 { Key: "room_l4", displayName: "Location", enabled: false },
 { Key: "section", displayName: "Section", enabled: true },
 { Key: "section_2", displayName: "Section 2", enabled: true },
 { Key: "campus", displayName: "Description", enabled: true }
 ] 

когда пользователь выбирает флажок, я хочу изменить значение 'enable' из false к истине и наоборот. после нажатия кнопки «Отправить» я хочу, чтобы консоль регистрировала объект данных таким, каким он является сейчас, за исключением измененного значения поля «включить». Например, если пользователь снимает флажок для data [0] .enabled, то мой ожидаемый результат будет:

 data = [
 { Key: "class_id", displayName: "Section ID", enabled:false },
 { Key: "room_l4", displayName: "Location", enabled: false },
 { Key: "section", displayName: "Section", enabled: true },
 { Key: "section_2", displayName: "Section 2", enabled: true },
 { Key: "campus", displayName: "Description", enabled: true }
 ] 

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit {
myForm: FormGroup
name = 'Angular';
data = [
  { Key: "class_id", displayName: "Section ID", enabled: true },
  { Key: "room_l4", displayName: "Location", enabled: false },
  { Key: "section", displayName: "Section", enabled: true },
  { Key: "section_2", displayName: "Section 2", enabled: true },
  { Key: "campus", displayName: "Description", enabled: true }
  ]
  onSubmit(e){
  console.log(e)
  }
  ngOnInit() {
  this.myForm = new FormGroup({
  name: new FormControl('valu'),
  });
  }

  }

app.component. html

    <form  [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
     <ul class="list-group list-group-flush" *ngFor="let a of data">
        <li class="list-group-item">
          <input
            formControlName="name" 
            (click)="onSubmit()"
            type="checkbox"
            [checked]="a.enabled"
          />
          {{ a.displayName }}
        </li>
      </ul>
      <button>Submit</button>
      </form>

Answer 1

Вы можете создать форму, используя FormArray для ваших данных. Прослушайте изменения, используя valueChanges.

component.ts

form: FormGroup

private formControls: {
  data: FormArray;
};

ngOnInit() {
  this.formControls = {
    data: new FormArray(this.data.map(x => {
      return new FormGroup({
        enabled: new FormControl(x.enabled)
      });
    }))
  };

  this.formControls.data.valueChanges.subscribe(() => {
    this.data.forEach((item, i) => {
      item.enabled = this.formControls.data.controls[i].get('enabled').value;
    });
  });

  this.form = new FormGroup(this.formControls);
}

component. html

<form  [formGroup]="form" (ngSubmit)="onSubmit(myForm)">
  <ul class="list-group list-group-flush" formArrayName="data"
    *ngFor="let a of data; index as i">
    <li class="list-group-item" [formGroupName]="i">
      <label>
        <input formControlName="enabled" type="checkbox" />
        {{ a.displayName }}
      </label>
    </li>
  </ul>
  <button>Submit</button>
</form>

Исходный массив форм построен из вашего массива данных .

Директивы формы отражают структуру вашей формы. Обратите внимание, как [formGroupName]="i" связывается с i группой форм в массиве.

DEMO: https://stackblitz.com/edit/angular-88kjfq

Answer 2

Существует возможность просто использовать [(ngModel)] и избегать использования форм. просто работать с this.data

https://stackblitz.com/edit/angular-ach8xw?file=src%2Fapp%2Fapp.component.html