I need assistance with a toggle app I'm developing that includes two slide toggles. Even though I have separate onChange() methods for each toggle, toggling one slide-toggle also changes the value of the other slide toggle. The toggle state is saved in a database. Can someone please help me resolve this issue? Thank you in advance.
Below is the TypeScript 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() {
// Code to retrieve data from the server
this.formGroup = this.formBuilder.group({
Policy1:new FormControl( this.policy1,[]),
Policy2: new FormControl( this.policy2,[])
});
}
onFormSubmit() {
// Function to handle form submission and update serverData
}
onChange(ob: MatSlideToggleChange) {
this.policy1 = !this.policy1;
this.disable=false;
}
onChange1(ob: MatSlideToggleChange) {
this.policy2 = !this.policy2;
this.disable=false;
}
}
This is my template:
<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-raised-button [disabled]="disable" type="submit">Save Settings</button>
</form>