Fondamentalement, je ne sais pas comment gérer ce sujet à partir d'un *ngFor où il y a une case à cocher. Je saurais normalement comment le faire avec un [(ngModel)], mais je ne sais pas comment le faire avec des formes réactives. Je souhaite associer ma case à cocher en fonction de ce que j'ai dans la variable "aUsers" et marquer les éléments que j'ai dans l'attribut "check". que devrais-je faire?

this.ValidacionReunion = new FormGroup({
  observaciones:new FormControl(null, []),
  arrayElements: new FormControl.array([])  //this is the name of my checkboxlist
});

aUsers:any=
[
  {
    "name":"xds",
    "userusuario":2,
    "check":true
  },
  {
    "name":"xdsx",
    "iduser":2,
    "check":false
  }      
]

. . .

<!-- obviously this is inside:<form [formGroup] = "ValidationReunion"> -->
<li  class="list-group-item waves-light"  *ngFor="let user of aUsers" >
 <input type="checkbox" formControlName="user.check">{{user.name}} {{user.iduser}}      
</li>
0
yavg 27 janv. 2019 à 08:43

3 réponses

Meilleure réponse

Vous devez créer un tableau de FormControl comme ceci

component.ts

const control = this.aUsers.map(c=> new FormControl(c.check));

this.ValidacionReunion = this.fb.group({
  observaciones:'',
  arrayElements: this.fb.array(control)

});

component.html

<form [formGroup]="ValidacionReunion">
    <li formArrayName="arrayElements" class="list-group-item waves-light" *ngFor="let control of ValidacionReunion.get('arrayElements').controls; let i = index">
        <input type="checkbox" [formControlName]="i">{{aUsers[i].name}}      
</li>
</form>

Exemple: https://stackblitz.com/edit/angular-7gjkgr

1
Chellappan வ 27 janv. 2019 à 06:29

Dans le fichier .ts, créez un tableau pour les rôles

Roles = [
    { id: true, description: 'W9' },
    { id: true', description: 'F9' },
    { id: true, description: 'other' },
  ];
this.customerForm = this.fb.group({
      roles: this.fb.array([]),
    });

Fonction à cocher et décocher

  updateChkbxArray(chk, isChecked, key): void {
    const chkArray = <FormArray>this.customerForm.get(key);
    if (isChecked) {
      // sometimes inserts values already included creating double records for the same values -hence the defence
      if (chkArray.controls.findIndex(x => x.value === chk.id) === -1)
        chkArray.push(new FormControl(chk.id));
    } else {
      const idx = chkArray.controls.findIndex(x => x.value === chk.id);
      chkArray.removeAt(idx);
    }
  }

Actuellement, je montre la case à cocher dans la case à cocher du matériau angulaire. Vous pouvez avoir votre propre case à cocher.

 <mat-checkbox *ngFor="let role of Roles" formArrayName="roles"
                               (change)="updateChkbxArray(role, $event.checked, 'roles')"
                                [value]="role.id">{{role.description}}
                  </mat-checkbox>
0
Crestamr 28 janv. 2019 à 12:58

À partir du contrôle enfant, définissez la valeur du nom du contrôle de formulaire sur user.check

Si votre formControlName est 'userCheck', à partir de la classe de composant dans votre formGroup, définissez userCheck: user.check. Si cela est vrai, la valeur de la case à cocher sera définie sur true.

0
Prashant Pimpale 27 janv. 2019 à 06:49