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