Получение значения флажка с использованием угловых

Question

У меня проблема с получением значений checkbox в угловых. Вот фрагмент кода:

<div class="list-group-item" *ngFor="let ticket of tickets">
   <input
      type="checkbox"
      [name]="ticket.id"
      [id]="ticket.id"
      [value]="ticket.id"
      formControlName="ticketTypes"
   />
   <label for="{{ ticket.id }}">{{ ticket.name }}</label>
</div>

Я получаю значение флажка выше true. Как правильно получить значение флажка?

Вот это stackblitz

Answer 1

В таких сценариях лучше / рекомендуется использовать formArray, если вы имеете дело с формой или можете просто использовать ngModel двустороннюю привязку данных Angular.

 <form [formGroup]="form" (submit)="submit(form.value)">
  <div *ngFor="let s of addOns.controls; let j=index">
   <input type="checkbox" [formControl]="s"/> {{user1.addOns[j].name}}
  </div>
 </form>

Также просто formControlNameт.е. один элемент управления обычно используется при работе с Radio Buttons, потому что в этом случае пользователь может выбрать всегда одно значение, но здесь, в случае checkboxes, вы также можете выбрать несколько записей, которые разработаны следующим образом, поэтому вы можете использовать array в этом случае, как указано выше в моем примере.

Рабочий пример

Или, если вы хотите использовать ngModel, вы можете использовать его следующим образом -

<ul>
    <li *ngFor="let item of list">
    <input type="checkbox" [(ngModel)]="item.checked">{{item.title}}
  </li>
</ul>

Рабочий пример

Answer 2

Вы можете использовать (change), который срабатывает каждый раз, когда изменение обнаруживает элемент ввода, а затем писать собственную логику для получения проверенных элементов из списка, например:

HTML:

<code><div class="list-group-item" *ngFor="let ticket of tickets">
    <input type="checkbox" [name]="ticket.id" [id]="ticket.id" [value]="ticket.id" (change)="onCheck(ticket.id)"/>
    <label for="{{ ticket.id }}">{{ ticket.name }}</label>
</div>

<pre>{{tickets | json}}

Код TS:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  tickets = [{ id: 1, name: "Test1" }, { id: 2, name: "Test2" }];

  checkedTickets = [];

  onCheck(evt) {
    if (!this.checkedTickets.includes(evt)) {
      this.checkedTickets.push(evt);
    } else {
      var index = this.checkedTickets.indexOf(evt);
      if (index > -1) {
        this.checkedTickets.splice(index, 1);
      }
    }
    console.log(this.checkedTickets);
  }
}

Working Demo