为滑动切换调用不同的 onChange 方法 [英] Call different onChange method for slide toggle
问题描述
我正在创建一个简单的切换应用程序,它有两个切换.我将切换状态保存在一个数据库中.我的问题是,当我切换一个幻灯片切换时,其他幻灯片切换的值也会发生变化.我对两个切换都有单独的 onChnage() 方法,但我仍然遇到相同的问题.请帮忙.提前致谢:
I am creating a simple toggle app that that has two toggles.I'm saving the toggle state in a db. My issue is that when I toggle one slide-toggle, the value of other slide toggle also changes.I have seperate onChnage() methods for both toggles but still I get the same issue.Please help.Thanks in advance:
这是我的 ts 代码:
Here is my ts code:
export class PolicyComponent implements OnInit {
@Output() change: EventEmitter<MatSlideToggleChange>;
formGroup: FormGroup;
policy1: boolean=false;
policy2: boolean=false;
disable:boolean=true;
serverData:any
constructor(
private formBuilder: FormBuilder,private policyService:PolicyService
) { }
ngOnInit() {
// this.filteringSchedule = JSON.parse(sessionStorage.getItem('toggleButtonState'));
this.policyService.getPolicy().subscribe(
(response)=>{
console.log(response);
this.serverData = response[0];
console.log(this.serverData)
if(this.serverData.policy1=="F")
{
this.policy1=false;
}
else this.policy1=true;
if(this.serverData.policy2=="F")
{
this.policy2=false;
}
else this.policy2=true;
}
)
this.formGroup = this.formBuilder.group({
Policy1:new FormControl( this.policy1,[]),
Policy2: new FormControl( this.policy2,[])
});
// this.policyService.getUserById(+ localStorage.getItem("policyId")).subscribe();
}
onFormSubmit() {
console.log("Policy1::"+this.formGroup.controls.Policy1.value);
if(this.formGroup.controls.Policy1.value)
{
this.serverData.policy1="T";
}
else{
this.serverData.policy1="F";
}
if(this.formGroup.controls.Policy2.value)
{
this.serverData.policy2="T";
}
else{
this.serverData.policy2="F";
}
//this.policyService.updatePolicy(this.policy.id,{policy1:this.policy.policy1}).subscribe(err=>{console.log(err)});
this.policyService.updateUser(this.serverData).subscribe(err=>{console.log(err)});
// alert(JSON.stringify(formValue, null, 2));
this.disable=true;
}
onChange(ob: MatSlideToggleChange) {
this.policy1 = !this.policy1;
this.disable=false;
}
onChange1(ob: MatSlideToggleChange) {
this.policy2 = !this.policy2;
this.disable=false;
}
}
以下是我的模板:
<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
<mat-action-list>
<mat-list-item > <mat-slide-toggle
(change)="onChange($event)" [checked]="policy1" formControlName="Policy1" >Policy1</mat-slide-toggle></mat-list-item>
<mat-list-item > <mat-slide-toggle (change)="onChange1($event)" [checked]="policy2" formControlName="Policy2">Policy2</mat-slide-toggle></mat-list-item>
</mat-action-list>
<p>Form Group Status: {{ formGroup.status}}</p>
<button mat-rasied-button [disabled]="disable" type="submit">Save Settings</button>
</form>
推荐答案
您对 mat-slide-toggle
元素进行了双重绑定,因此 Angular 会感到困惑,并且不知道该放置哪个值
You have double binding to your mat-slide-toggle
elements so Angular gets confused and it doesn't know which value to put there.
<mat-action-list>
<mat-list-item >
<mat-slide-toggle (change)="onChange($event)"
[checked]="policy1" <----------------------------------first binding
formControlName="Policy1"><----------------------------second binding
Policy1</mat-slide-toggle>
</mat-list-item>
<mat-list-item >
<mat-slide-toggle (change)="onChange1($event)"
[checked]="policy2" <----------------------------------first binding
formControlName="Policy2"><----------------------------second binding
Policy2</mat-slide-toggle>
</mat-list-item>
</mat-action-list>
根据我的经验,它会导致这个问题.在 Angular 中使用响应式表单的正确方法是通过属性 formControlName="..."
使用两种方式绑定,然后在构建表单时您应该这样做:
In my experience, it causes this trouble.
The right way of using reactive forms in Angular is using two ways binding by the property formControlName="..."
, then when you build the form you should do:
ngOnInit() {
this.formGroup = this.formBuilder.group({
Policy1: new FormControl(false, []),
Policy2: new FormControl(false, [])
});
this.policyService.getPolicy().subscribe((response) => {
this.serverData = response[0];
this.formGroup.controls.Policy1.setValue(this.serverData.policy1=="F");
this.formGroup.controls.Policy2.setValue(this.serverData.policy2=="F");
});
}
和 HTML:
<mat-action-list>
<mat-list-item >
<mat-slide-toggle (change)="onChange($event)"
formControlName="Policy1"><----------------------------Only!!
Policy1</mat-slide-toggle>
</mat-list-item>
<mat-list-item >
<mat-slide-toggle (change)="onChange1($event)"
formControlName="Policy2"><----------------------------Only!!
Policy2</mat-slide-toggle>
</mat-list-item>
</mat-action-list>
这篇关于为滑动切换调用不同的 onChange 方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!