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

我用这个复选框： 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 3

<强>输入

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

更改活动

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

Answer 4

您必须为复选框指定name属性才能在后端跟踪它。

Answer 5

enter code here

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用包含label.id的name属性，这样你就可以获得数组形式的所有值。

GUESS这将有所帮助。

Answer 6

我想你想知道通过为输入标签属性指定ng-model属性来检查或不通过布尔值形式轻松获取的复选框。

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

了解更多信息，请检查angular material md-checkbox和angular material md-checkbox demo

从角度2打字稿中的复选框中获取值

6 个答案: