vendredi 3 novembre 2017

Angular 4 generate checkboxes dynamically and Perform Mass Update on FormSubmit

in my angular4 project i am trying to generate Checkboxes Dynamically with the Help of ngFor and send the values of all the checkboxes ( checked or unchecked ) back to component on form Submit. but the main problem i am facing if i interact with the checkbox then i get the value of it else, if i do not interact with it then its value will won't be sent.

So far i have tried this but doesn't seem to help.

two-way binding on checkbox ngFor Angular2

Angular 2 set and bind checkboxes with a ngFor

Angular 2 Checkbox Two Way Data Binding

here is the code

<form #sForm="ngForm" (ngSubmit)="Updates(sForm.value)" novalidate>
                                    <div class="table-responsive">
                                        <table class="table table-borderless">
                                            <thead>
                                                <tr>


                                                    <td align="center"><b>Admin</b></td>
                                                    <td align="center"><b>Delete</b></td>
                                                    <td align="center"><b>Write</b></td>
                                                    <td align="center"><b>Read</b></td>
                                                </tr>
                                            </thead>
                                            <tbody *ngIf="UsersList && UsersList !== 'Not Found'">
                                                <tr *ngFor="let Users of UsersList;">


                                                    <td align="center"><input type="checkbox"  [checked]="(Users[7] == 1 ? 'checked':'' )"></td>
                                                    <td align="center"><input type="checkbox"  [checked]="(Users[6] == 1 ? 'checked':'' )"></td>
                                                    <td align="center"><input type="checkbox"  [checked]="(Users[5] == 1 ? 'checked':'' )"></td>
                                                    <td align="center"><input type="checkbox"  [checked]="(Users[4] == 1 ? 'checked':'' )"></td>
                                                </tr>
                                                <tr>
                                                    <button type="submit" class="btn btn-lg UpdateUsersbtn">Update</button>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    </form>

here is the ts file's code

    //only necessary code:-
     @ViewChild('RecordsForm') formRec : any;
     UsersList;
     LoadUsersChecboxes(data){
       this.UsersList = tempUsers; // tempUsers contains list of records 
    }
    Updates(records){
          console.log(JSON.stringify(records));
   }

all checkboxes are loaded with their defined values in UsersList when the form loads.

i get the values of checkboxes if i use (change) method like this

<td align="center"><input type="checkbox" (change)="Updates($event.target.checked)" [checked]="(Users[7] == 1 ? 'checked':'' )"></td>

using (change) method needs user to interact with every checkboxes in order to get their values and that's not a feasible solution.

using [(ngModel)] doesn't seem to be working, since all checkboxes are generated dynamically. i.e. if i use [(ngModel)] with name="abc" then when form Loads checkboxes are generated without being selected.

what i am trying to achieve is, on form submit i need all checkboxes values whether they are touched(checked/unchecked) or not. so that i can perform a mass update. please if anyone know how to do this, then help me.




Aucun commentaire:

Enregistrer un commentaire