title: How to make mat-slide-toggle with confirm
body: <p>The problem that I have in my code below is, when I click on the <strong>confirm</strong>, the switch changes. I want the switch to change only when I click OK.</p>
  
  <p>Can you suggest me any idea? How to make mat-slide-toggle with confirm? </p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;form [formGroup]="myform" class="col s12"&gt;
  &lt;div *ngFor="let item of homeboxsp;let i = index"&gt;
              &lt;section class="example-section"&gt;
              &lt;mat-slide-toggle value="active" formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"(click)="onActiveHomeboxP()"&gt; {{item.active}}
              &lt;/mat-slide-toggle&gt;
          &lt;/section&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>ts code:</p>
  
  <pre><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 &lt; 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 =&gt; x.homeboxpackage_id),
      });
      console.log(this.homeboxsp.map(x =&gt; x.active))
      console.log(this.homeboxsp.map(x =&gt; 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;
      }
    }
  }
  </code></pre>