web-dev-qa-db-fra.com

Obtenir la valeur de la case cochée dans angular 2 typescript

J'utilise Angular 2 TypeScript. Je suis confronté à un problème dans lequel je dois soumettre un formulaire contenant des cases à cocher. J'ai besoin de valeurs qui sont dans les attributs des cases à cocher. Les cases à cocher sont dynamiques, donc tout nombre de cases à cocher sera là.

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

Je pense que cela devrait fonctionner (non testé)

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

et stockez les valeurs des cases à cocher modifiées dans checkboxes dans votre composant.

20
Günter Zöchbauer

J'utilise ceci pour les cases à cocher: case à cocher ng2-material

Et vous pouvez le faire dans votre composant:

<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;
  }
2
alexalexandresq

Contribution 

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

Change Event 

selectionChange(input: HTMLInputElement) {
    input.checked === true
      ? doSomethingIfTrue()
      : doSomethingIfFalse();
}
2
Dblock247
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>

Utilisez l'attribut name, y compris label.id, pour obtenir toutes les valeurs sous forme de tableau.

Suppose que cela aidera.

0
Nambi N Rajan

Vous devez spécifier l'attribut name pour la case à cocher afin de pouvoir le suivre en backend.

0
kemsky