angular2のチェックボックスの値を変更する前に確認を表示

Question

私のアプリケーション内に確認ダイアログを実装しようとしています。現在、私は少し論理と何をするのか混乱しています。

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, ] 
     }); 
    } 
} 

私は、変更前と後の値を操作するための3つの機能confirmationDialog()、toOn()、toOff()を作成しました。私はそれが助けになるかもしれないと思ったが、私はこれをやるべきだったが、今私は正しいことが分かった。

以下は私のモーダルです。

モーダル

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

例、 現在のステータスがオンの場合は、確認ダイアログが持っている必要があります。

• オフしながらそれを変更するには 'はい' ボタンを'いいえ'ボタンを元に戻す/変更を防止する

確認ダイアログにラジオボタンの変更を許可するのがベストプラクティスですか？

何か助けていただければ幸いです。ありがとうございます！状況に

Answer 1

、changeイベントはcheckboxのステータスとngModelがすでに変更されているので、あなたが確認一部を達成するために(click)を使用することができます遅れています。

また、防止部分については$event.preventDefault()を使用して、チェックボックスのステータスを(click)イベントから変更しないようにすることができます。

window.confirmを使用して確認ダイアログを表示する単純なプランカーexampleを作成しました。