My current challenge involves implementing a confirmation dialog in my application, and I'm feeling a bit unsure about the logic behind it.
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 created three functions confirmationDialog(), toOn(), toOff() to handle value manipulations before and after changes. While I initially thought these would help me accomplish the task, I now realize that something isn't quite 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">×</span>
</button>
</div>
<form class="form-horizontal">
<div class="modal-body">
<p>Are you sure you want 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 -->
For instance, when the current status is On, the confirmation dialog should have:
- A 'Yes' button to change it to off
- A 'No' button to revert/prevent the changes
What's the recommended way to implement a confirmation dialog for changing a radio button?
Any assistance would be greatly appreciated. Thank you in advance!