Как сделать, чтобы поменять переключатель только после нажатия кнопки подтверждения "ок"

Question

Как сделать так, чтобы переключатель переключался только тогда, когда я нажимал Ok в окне подтверждения?Когда я нажимаю Отмена в окне подтверждения, я не хочу ничего менять.

Мой код html:

<mat-card class="result">
  <mat-card-content>
    <h2 class="example-h2">Result</h2>
     <section class="example-section">
      <mat-slide-toggle
          class="example-margin"
          [color]="color"
          [checked]="checked"
          [disabled]="disabled"
          (click)="myfunction()">
        Slide me!
      </mat-slide-toggle>
    </section>
  </mat-card-content>
</mat-card>

Код ts:

export class SlideToggleConfigurableExample {
  color = 'accent';
  checked = false;
  disabled = false;
    myfunction() {
    if (confirm('Are you sure to change Status?')) {
     }
  }
}

Я пробовал и этот код,

<mat-slide-toggle
      class="example-margin"
      [color]="color"
      [checked]="checked"
      [disabled]="disabled"
      (click)="myfunction()"
      onclick="return confirm('Are you sure?')">
    Slide me!
  </mat-slide-toggle>

и удалите if (confirm('Are you sure to change Status?')) {} из ts.

В этом у меня есть такой результат: моя функция выполняется, когда я нажимаю ok и отменяю.

Пожалуйста, Как сделать, переключатель поменять только при нажатии подтверждения ok.

Спасибо

Обновление:

HTML-код:

<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 код:

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;
    }
  }
}

Изображение:

1. проверено, поскольку статус 1
2. проверен, когда янажмите Отмена
3. проверяется, когда я нажимаю ОК в consele.log('ture'), показывать true

Обновление: Когда я добавляю (ngModel)]="checkedBtn" в html, переключатели меняют все, а не только один переключатель.

Answer 1

Следующее изменит переключатель только при нажатии OK

В HTML:

<mat-slide-toggle  [(ngModel)]="checkedBtn" 
        (click)= "myfunction()"></mat-slide-toggle>

В ТС:

myfunction() {
    if (confirm('Are you sure?')) {

      console.log('true')

    }else{

      this.checkedBtn= !this.checkedBtn;
    }
  }