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

Question

Я использую 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> 

Answer 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 в компоненте.

Answer 2

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

Answer 3

Я использую это для галочки: 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; 
    } 

Answer 4

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

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

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

Answer 5

вход

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

Change Event

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

Answer 6

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>

Используйте имя атрибута, включая label.id, так что вы получите все значения в виде массива.

УГАДАЙ ЭТО ПОМОГАЕТ.