Showing confirmation before changing the value of a checkbox in angular2

Question

I'm trying to implement a confirmation dialog within my application. Currently i'm a bit confused what to do with the logic.

UserDetailsComponent.ts

import { Component, OnInit, OnDestroy, ViewChild, Input, OnChanges, SimpleChange  } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';

import { ApiService } from '../../assets/services/api.service';

import { UserDetails } from '../../assets/classes/controller-details';

@Component({
  selector: 'app-user-details',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss']
})
export class UserDetailsComponent implements OnInit, OnDestroy, OnChanges {

    @Input('cmd') cmd_s: boolean;
    changeLog: string[] = []

    userDetailForm: FormGroup; 

    id: any;
    data: UserDetails = new UserDetails();

    submitted = false;
    active = false;

    private sub: any;

    constructor(
      private route: ActivatedRoute,
      private apiService: ApiService,
      private fb: FormBuilder) {}

    ngOnInit() {
      this.sub = this.route.params.subscribe(params =>{
        this.id = params['id']; //console.log(this.id);
        this.getData(this.id);
      })
    }

    ngOnDestroy(){
      this.sub.unsubscribe();
    }

    confirmDialog(e){
      if(e.target.checked){
        console.log('changing to on');
        this.active = true;
      }else{
        console.log('chenging to off');
        this.active = true;
      }
      this.active = false;
    }

    toOn(){
      this.controllerDetailForm.controls['status'].setValue(1);
      console.log('Changed to on');
    }

    toOff(){
      this.controllerDetailForm.controls['status'].setValue(0);
      console.log('Changed to off');
    }

    createForm(){
      this.controllerDetailForm = this.fb.group({
        id: [this.data.id],
        name: [this.data.name, Validators.required],
        status: [this.data.status, ]
      });
    }
}

I've create three functions confirmationDialog(), toOn(), toOff() to manipulate the value before and after change. I thought that it could help but me to get this done, however now i realized that there's something not right.

Below is my modal.

Modal

<input type="checkbox" #status formControlName="status" class="switch-input" [checked]="data.status" (change)="confirmDialog($event)">

<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirmation</h4>   
                <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="form-horizontal">
                <div class="modal-body">
                    <p>Are you sure you wan't to change?</p>    
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" value="Yes" (click)="onConfirmation() ">
                    <button type="button" class="btn btn-secondary" (click)="smallModal.hide()">No</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Example, If the current status is On, then the confirmation dialog should has:

• 'Yes' button to change it to off
• While 'No' button revert/prevent the changes

What would be the best practice to give a confirmation dialog from changing a radio button?

Any kind of help is appreciated, Thanks in advance!

Answer 1

for your situation, change event is late because the status and ngModel of the checkbox has changed already, you can use (click) to achieve the confirm part.

And for prevent part, you can use $event.preventDefault() to avoid the checkbox's status to be changed from (click) event.

I have make a simple plunker example which used the window.confirm to show the confirm dialog.