角2のチェックボックスから値を取得します。

Question

角2の字形を使用しています。私はチェックボックスを含むフォームを提出する必要がある問題に直面しています。チェックボックスの属性に値が必要です。チェックボックスは動的なので、任意の数のチェックボックスが表示されます。

<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と指定すると、バックエンドでそれを追跡できるようになります。 ng2-material checkbox

そして、あなたはあなたのコンポーネントでこれを行うことができます：

Answer 3

私は、チェックボックスのためにこれを使用

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

変更イベント

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

Answer 6

enter code here 

をチェックlabel.id含む

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>

使用name属性は、アレイ状にすべての値を取得しますので。

この情報はお役に立ちましたか？