CODEWITHSUNDEEP
angularcheckbox
yavg
yavg

Reputation: 3051

handle checkbox with "new FormControl"

Basically I do not know how to handle this topic from an *ngFor where there is checkbox. I would normally know how to do it with a [(ngModel)], but I do not know how to do it with reactive forms. I want to associate my checkbox according to what I have in the variable "aUsers" and mark the elements that I have in the "check" attribute. what should I do?

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>

Upvotes: 0

Views: 10063

Answers (3)

Crestamr
Crestamr

Reputation: 57

In .ts file create an array for roles

Roles = [
    { id: true, description: 'W9' },
    { id: true', description: 'F9' },
    { id: true, description: 'other' },
  ];

this.customerForm = this.fb.group({
      roles: this.fb.array([]),
    });

function to check and uncheck

  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);
    }
  }

Currently I am showing checkbox in angular material checkbox. You can have your own checkbox.

 <mat-checkbox *ngFor="let role of Roles" formArrayName="roles"
                               (change)="updateChkbxArray(role, $event.checked, 'roles')"
                                [value]="role.id">{{role.description}}
                  </mat-checkbox>

Upvotes: 0

Abhishek
Abhishek

Reputation: 380

From the child control, set the value of form control name to user.check

If your formControlName is 'userCheck' then from component class inside your formGroup, set userCheck: user.check. If this is true, this'll set a value of checkbox to true.

Upvotes: 0

Chellappan வ
Chellappan வ

Reputation: 27363

You Should create Array of FormControl like this

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>

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

Upvotes: 3

Related Questions