How to bind data value with checkbox (checked or unchecked )

Question

I have a few checkboxes and on Checked event I am submitting the data id back to server instead of the true or false value, but I am not able to bind checkbox status after reloading the page. How can I check if the checkbox value exists in database?

This is My HTML code

<span *ngFor = "let groupid of result" >
                        <ng-container *ngIf ="regTypeSelectedOption === 'my group'">
                      <div *ngFor="let group of my_groupList; let i = index" >
                             <label>
                                <input type="checkbox" value="{{group._id}"
                                 [name]="videodisplaygroup"
                              [checked] = "group._id ==groupid.id"

                                 (change)="getCheckboxValues($event,group)" />
                                <span innerHTML="{{group.group_name}}"></span>
                            </label>
                        </div>
                    </ng-container>
                </span >

What does the server return telling you that a particular group is checked? — Ashish Ranjan
– Ashish Ranjan, Commented May 2, 2019 at 7:27
Onclick check box I am saving group id instead of true false, — K.S
– K.S, Commented May 2, 2019 at 7:29
this way saving in database videodisplaygroup: Array(2) 0: "5c9b52580737ae188c5be14b" 1: "5c8f6c2ea2c9eb1418f8fb1b" — K.S
– K.S, Commented May 2, 2019 at 7:31
Right, so how to you differentiate between a checked and unchecked groups because on front end you will have group ids for both of them, isn't it? — Ashish Ranjan
– Ashish Ranjan, Commented May 2, 2019 at 7:31
and here what I want if this two id is exist in database then only that particular checkbox should be checked — K.S
– K.S, Commented May 2, 2019 at 7:32

Vova Bilyachat · Accepted Answer · 2019-05-02 07:28:28Z

1

I would suggest you to look into reactive forms

<input type="checkbox" [fromControl]="myValue"/>

Code

myValue = new FormControl(); // property inside of component class
myValue.valueChanges.subscribe((v)=>{ console.log('value changed')}); // Can be in constructor or ngInit
myValue.setValue(true| false) // When your server returns data

edited May 2, 2019 at 7:28

answered May 2, 2019 at 7:25

Vova Bilyachat

19.5k4 gold badges60 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

K.S Over a year ago

when getting data from server ?

Nagender Pratap Chauhan · Accepted Answer · 2019-05-02 08:44:40Z

In started, you create a Array List with the help of selected array and database array(Full Array List). custom = { id: number, name : string, checked : boolean; }

Like : -

 full_Array [] = [{id:1, name= "mohan"},{id:1, name= "Sachin"},{id:1,name= "Azhar"}]
 selected_Array [] = [{id:1, name= "Sachin"}]  // data come from API
 own_Array [] = [];

Now created your own Array List -

          for(let j=0; j< selected_Array.length; j++){
               for(let i=0; i< full_Array.length; i++){
                  if(selected_Array[j].id === full_Array[i].id ){
                      var data = new this.custom();
                           data.id = selected_Array[j].id;
                           data.name = selected_Array[j].name;
                           data.selected = true;
                           this.own_Array.push(data);
                     }else{
                           var data = new this.custom();
                           data.id = selected_Array[j].id;
                           data.name = selected_Array[j].name;
                           data.selected = false;
                           this.own_Array.push(data);
                         }
               }
                   }

<tr *ngFor="let contactCard of own_Array">
 <td>
  <input type="checkbox" name="optionsCheckboxes" checked="" 
        [(ngModel)]="contactCard.selected" (change)="checkContact(contactCard)" required>
 </td>
</tr>

Here checkbox is binding but what is happening here if select more than one checkbox then after submitting when I reload the page then loop is showing two time

Hien Nguyen · Accepted Answer · 2019-05-02 11:36:27Z

0

You can set [(ngModel)]="fromDB.checked" in input tag

<input type="checkbox" name="checkbox{{fromDB.docId}}" 
  [(ngModel)]="fromDB.checked" (change)="checkboxClicked()" />

Assume data from DB

fromDB = 
    {
      docId:1,
      docName:'Test name',
      checked: true
    };

With your source code change to

<div *ngFor="let group of my_groupList; let i = index" >
    <label>
      <input 
          type="checkbox"
          value="{{group._id}"
          [(ngModel)] = "group.checked"
          [name]="videodisplaygroup"       
          (change)="getCheckboxValues($event,group)" />
      <span innerHTML="{{group.group_name}}"></span>
    </label>
  </div>

Update:

With updated code, you dont need use 2 loop, you should handle my_groupList add a property checked base on result object. This line checked: this.result.find(d => d.id == c._id) confirm that what item is checked.

this.my_groupList = this.my_groupList.map(c => 
  { return { _id: c._id, group_name: c.group_name, 
    checked: this.result.find(d => d.id == c._id) }; 
  })

Demo https://stackblitz.com/edit/angular-gru8a2?file=src%2Fapp%2Fapp.component.ts

edited May 2, 2019 at 11:36

answered May 2, 2019 at 7:35

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

8 Comments

K.S Over a year ago

but I am little bit confused

K.S Over a year ago

Actually I am getting group list from database then using ngfor I am displaying group list with checkbox then after that I am saving checkbox value in same database but different place not back to where I am getting group list

K.S Over a year ago

So How can run 2 loop ?

K.S Over a year ago

are you there ?

Hien Nguyen Over a year ago

I saw only 1 loop in your code? where is 2 loops? update your question?

|

Collectives™ on Stack Overflow

How to bind data value with checkbox (checked or unchecked )

3 Answers 3

1 Comment

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related