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

我已經創建三個功能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)事件更改爲。

我已經做了一個簡單的plunker example其中使用window.confirm顯示確認對話框。