angular - Visa bekräftelse innan värdet på en kryssruta ändras i angular2

Jag försöker implementera en bekräftelsedialog i min applikation. Just nu är jag lite förvirrad över vad jag ska göra med logiken.

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

Jag har skapat tre funktioner confirmationDialog(), toOn(), toOff() för att manipulera värdet före och efter ändring. Jag trodde att det kunde hjälpa mig att få detta gjort, men nu har jag insett att något inte står rätt till.

Nedan är min modal.

Modalt

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

Exempel, om det aktuella statusen är På, då ska bekräftelsedialogrutan ha:

  • 'Ja'-knappen för att ändra den till av
  • Medan 'Nej'-knappen återställer/förhindrar ändringarna

Vad skulle vara bästa praxis för att ge en bekräftelsedialog vid ändring av en radioknapp?

All slags hjälp uppskattas, Tack på förhand!

Svar #1

För din situation är change-händelsen sen eftersom statusen och ngModel för checkbox redan har ändrats, du kan använda (click) för att uppnå bekräftelsedelen.

Och för att förhindra delen, kan du använda $event.preventDefault() för att undvika att kryssrutans status ändras från (click)-händelsen.

Jag har gjort ett enkelt plunker-exempel som använder window.confirm för att visa bekräftelsedialogen.

Relaterade artiklar