我正在使用mat slide toggle表单材质,如以下示例所示
https://material.angular.io/components/slide-toggle/overview
我在本例中遇到的问题如下:
https://stackblitz.com/edit/angular-zafcmh-rvgjhs?file=app%2Fslide-toggle-configurable-example.ts
当我单击一个开关时,我希望单击只得到一个开关,而不是全部。
你能提出解决方案吗?
我的代码html:
<form [formGroup]="activeHomeboxPForm">
<mat-slide-toggle formControlName="active"
id="active"
[(ngModel)]="device"
(change)="onChange($event)"
(click)="onActiveHomeboxP(item.homeboxpackage_id)">
</mat-slide-toggle>
{{device}}
</form>
我的ts代码:
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)
this.hsP.activatehomeboxp(editHomeboxp).subscribe(
result => {
if (result === true) {
Materialize.toast('HomeboxPacket updated successfully', 4000);
} else {
this.loading = false;
}
},
error => {
this.loading = false;
}
);
}
}
onChange(value) {
if (value.checked === true) {
this.device = 1;
console.log(1);
} else {
this.device = 0;
console.log(0);
}
}
非常感谢。