Получение значения из флажка в angular 2 typescript

Я использую Angular 2 typescript. Я столкнулся с проблемой, мне нужно отправить форму, содержащую флажки. Мне нужны значения, которые находятся в атрибуте флажка. флажки динамические, поэтому любое количество флажков будет там.

  <div class="checkbox" *ngFor="#label of labelList">
       <div class="col-sm-4">
            <label><input type="checkbox" value="{{label.Id}}">{{ label.Name }} </label>
       </div>   
 </div>

Ответ 1

Я думаю, что это должно работать (не проверено)

<div class="checkbox" *ngFor="let label of labelList">
  <div class="col-sm-4">
    <label>
      <input type="checkbox" value="{{label.Id}}" (change)="checkboxes[$event.target.getAttribute('value')]=$event.target.checked">
        {{ label.Name }}</label>
  </div>   
</div>

и сохраните значения измененных флажков в checkboxes в вашем компоненте.

Ответ 2

Я использую это для флажков: ng2-material checkbox

И вы можете сделать это в своем компоненте:

<md-checkbox [checked]="exists(label.Id)" (click)="toggle(label.Id)"></md-checkbox>

  selected = [];
  @Output() selectedChange:EventEmitter<any> = new EventEmitter();

  toggle(id) {
    var index = this.selected.indexOf(id);
    if (index === -1) this.selected.push(id);
    else this.selected.splice(index, 1);
    this.selectedChange.emit(this.selected);
  }

  exists(id) {
    return this.selected.indexOf(id) > -1;
  }

Ответ 3

Вы должны указать атрибут name для флажка, чтобы отслеживать его на сервере.

Ответ 4

Ввод

<input type="checkbox" (change)="selectionChange($event.srcElement, dataItem)">

Изменить событие

selectionChange(input: HTMLInputElement) {
    input.checked === true
      ? doSomethingIfTrue()
      : doSomethingIfFalse();
}

Ответ 5

enter code here

submitForm(form:NgForm){
console.log(form.value);
}

<div class="checkbox" *ngFor="#label of labelList">
       <div class="col-sm-4">
            <label><input type="checkbox" name='label{{label.Id}}'  value="{{label.Id}}">{{ label.Name }} </label>
       </div>   
 </div>

Ответ 6

Я думаю, что вы хотите знать флажок, который был установлен или нет, который вы можете легко получить в виде логического значения, указав атрибут ng-model для атрибута входного тега.

<md-checkbox ng-model="ctrl.someBooleanValue"></md-checkbox>

для дополнительной информации angular материал md-checkbox и angular материал md-checkbox demo