web-dev-qa-db-fra.com

Angular Comment obtenir la valeur de case à cocher multiple?

J'utilise la case à cocher angulaire pour sélectionner plusieurs données et j'essaie d'obtenir la valeur de la case à cocher du formulaire submit.Au lieu d'obtenir la valeur im, obtenir la valeur true.

   export class CreatesessionComponent implements OnInit {    
      form : FormGroup ;
      constructor(private formBuilder: FormBuilder) {       
      }        
      ngOnInit() {
       this.form = this.formBuilder.group({     
          useremail :  new FormArray([
            new FormControl('',Validators.required)
          ])    
      });
    }
  }

userdata est un tableau dynamique que je vais obtenir à partir de la base de données 

<div class = "row" formArrayName="useremail; let k = index">
   <div class="col-md-8 col-sm-5 col-xs-12 col-lg-8">
       <div *ngFor="let data of userdata">
           <div class="col-md-6">
               <input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}}
           </div>
       </div>
   </div>
</div>
angularangular2-forms
22
Arun Kumaresh

Puisque vous souhaitez utiliser plusieurs valeurs, vous devez utiliser une variable FormArray, étant donné que FormControl ne peut capturer qu'une seule valeur.

Commencez par déclarer un formulaire videArray:

this.myForm = this.fb.group({
  useremail: this.fb.array([])
});

Parcourez vos e-mails, surveillez l’événement change et transmettez-le à une méthode onChange dans laquelle vous vérifiez si c’est checked, puis ajoutez l’email correspondant à la table formarray. :

<div *ngFor="let data of emails">
  <input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br>
</div>

Et onChange:

onChange(email:string, isChecked: boolean) {
  const emailFormArray = <FormArray>this.myForm.controls.useremail;

  if(isChecked) {
    emailFormArray.Push(new FormControl(email));
  } else {
    let index = emailFormArray.controls.findIndex(x => x.value == email)
    emailFormArray.removeAt(index);
  }
}

Démo

44
AJT_82

J'ai résolu de deux manières différentes Une avec une simple case à cocher tableau - mat-checkbox Et l'autre avec mat-selection-list.

Contenu du code dans le post. À la valeur, vous pouvez définir toutes sortes de combinaisons . Dans mon cas, j’ai utilisé la concatination id et description afin d’initier les contrôles de formulaire à la fin d’une source.

https://medium.com/@2bhere4u/angular-5-material-design-checkbox-array-reactive-forms-handle-3885dde366ca

Mon problème était avec le nettoyage du tableau de cases à cocher dans un exemple plus simple .. Pas de temps à perdre .. Courir le long des tâches suivantes .. :)

0
Tzvi Gregory Kaidanov

J'ai fait cette fonction en entrée pour la sélection automatique du formulaire de chargement:

[vérifié] = "this.selected? this.selected.type.includes (type): false"

Code complet:

<label *ngFor="let type of this.entityType" class="checkbox-inline c-checkbox">
<input type="checkbox" [checked]="this.selected? this.selected.type.includes(type) : false" (change)="onChangeEntityType(type, $event.target.checked)"/>
<span class="fa fa-check"></span>{{type | translate}}</label>

Où 

this.selected

est mon objet et 

this.selected.type.includes (type)

vérification automatique si les cases à cocher seront cochées.

0
Pedro Braz

Vous pouvez obtenir un tableau de données vérifiées: 

<input .... (change)="onChange(data)" />
onChange(data){
   data.checked = !data.checked;
}

pour obtenir toutes les valeurs vérifiées

let checkedValues = userdata.filter(x => x.checked).map(x => x.email);
0
Nam Nguyễn Khoa