In my app, I am using Material slide-toggle to control the activation status of products. However, I am facing the following issues:
- Whenever I toggle one product, it affects the values of all other products as well.
- The displayed value does not match the set value. Refer to the console screenshot for details.
https://i.stack.imgur.com/bsvoc.png
https://i.stack.imgur.com/0gek7.png
For reference:
When active is set to 1 --> The function submits. When active is set to 0 --> The function activates the slide-toggle.
This is a snippet of my HTML code:
<form [formGroup]="activeHomeboxPForm">
<mat-slide-toggle formControlName="active" id="active" [(ngModel)]="active" (change)="onChange($event)" (click)="onActiveHomeboxP(item.homeboxpackage_id)">
</mat-slide-toggle>
{{active}}
</form>
And this is my TypeScript code:
this.activeHomeboxPForm = this.fb.group({
'active': new FormControl('', Validators.required),
'homeboxpackage_id': new FormControl('', Validators.required)
});
populateFormHomeboxP() {
this.activatedRoute.params.subscribe(
params => {
this.hsP.getHomeboxPById(params['id']).subscribe(
homeboxP => {
this.homeboxP = homeboxP;
this.activeHomeboxPForm.controls['active'].setValue(homeboxP.active);
this.activeHomeboxPForm.controls['homeboxpackage_id'].setValue(homeboxP.homeboxpackage_id);
}
);
}
);
}
onActiveHomeboxP(homeboxpackageid) {
this.loading = true;
if (confirm('Are you sure to change Status?')) {
let editHomeboxp = new HomeboxP(
this.activeHomeboxPForm.value
);
editHomeboxp.homeboxpackage_id = homeboxpackageid;
console.log(editHomeboxp) // --> active: 1
this.hsP.activatehomeboxp(editHomeboxp).subscribe(
result => {
if (result === true) {
Materialize.toast('HomeboxPacket updated successfully', 4000);
this.router.navigate(['/main/homeboxpackage']);
} else {
this.loading = false;
}
},
error => {
this.loading = false;
}
);
}
}
onChange(value) {
if (value.checked === true) {
this.active = 1;
console.log(1); //1
} else {
this.active = 0;
console.log(0); //0
}
}