How to make mat-slide-toggle with confirm

Question

The problem that I have in my code below is, when I click on the confirm, the switch changes. I want the switch to change only when I click OK.

Can you suggest me any idea? How to make mat-slide-toggle with confirm?

Html code:

<form [formGroup]="myform" class="col s12">
<div *ngFor="let item of homeboxsp;let i = index">
            <section class="example-section">
            <mat-slide-toggle value="active" formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"(click)="onActiveHomeboxP()"> {{item.active}}
            </mat-slide-toggle>
        </section>
</div>
</form>

ts code:

export class AppComponent {
  public homeboxsp: HomeboxP[] = [];
  myform: FormGroup;
  checkedBtn: boolean;
  constructor(public service: Service) {
  }
  ngOnInit() {
    this.populateFormHomeboxP();
  }
  populateFormHomeboxP() {
    this.homeboxsp = this.service.getData();


    let controls = {
      'homeboxpackage_id': new FormControl('', Validators.required)
    };

    for (let i = 0; i < this.homeboxsp.length; i++) {
      controls['active-' + i] = new FormControl(this.homeboxsp[i].active == '1', Validators.required)
    }
    this.myform = new FormGroup(controls);
    this.patchForm();
  }
  patchForm() {
    this.myform.patchValue({
      homeboxpackage_id: this.homeboxsp.map(x => x.homeboxpackage_id),
    });
    console.log(this.homeboxsp.map(x => x.active))
    console.log(this.homeboxsp.map(x => x.homeboxpackage_id))
  }
  onActiveHomeboxP() {
    if (confirm('Are you sure?')) {
      let edigps = this.myform.value
      console.log(edigps)
      console.log('true')
    } else {
      this.checkedBtn = !this.checkedBtn;
    }
  }
}

Answer 1

If you have an object you can reassign the value after the (change) event:

<mat-slide-toggle (change)="slideToggleChange($event, obj)">
   Change me
</mat-slide-toggle>

slideToggleChange(event: MatSlideToggleChange, obj: any): void {
    event.source.checked = obj.enabled; // Force slide toggle with our value
  
    // Open confirmation dialog
    this.dialog.open(ConfirmationDialog, {
        data: config,
    }).afterClosed().subscribe(
        (confirm: boolean) => {
        if (confirm === true) {
            // Do something
        }
      }
    );
  }