File
Implements
Metadata
| selector |
cd-deletion-modal |
| styleUrls |
./critical-confirmation-modal.component.scss |
| templateUrl |
./critical-confirmation-modal.component.html |
Constructor
constructor(modalRef: BsModalRef)
|
|
|
Parameters :
| Name |
Type |
Optional |
| modalRef |
BsModalRef
|
No
|
|
Methods
|
callSubmitAction
|
callSubmitAction()
|
|
|
|
|
|
stopLoadingSpinner
|
stopLoadingSpinner()
|
|
|
|
|
|
actionDescription
|
Type : string
|
Default value : 'delete'
|
|
|
|
bodyTemplate
|
Type : TemplateRef<any>
|
|
|
|
Public
modalRef
|
Type : BsModalRef
|
|
|
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { Observable } from 'rxjs';
import { CdFormGroup } from '../../forms/cd-form-group';
import { SubmitButtonComponent } from '../submit-button/submit-button.component';
@Component({
selector: 'cd-deletion-modal',
templateUrl: './critical-confirmation-modal.component.html',
styleUrls: ['./critical-confirmation-modal.component.scss']
})
export class CriticalConfirmationModalComponent implements OnInit {
@ViewChild(SubmitButtonComponent)
submitButton: SubmitButtonComponent;
bodyTemplate: TemplateRef<any>;
bodyContext: object;
submitActionObservable: () => Observable<any>;
submitAction: Function;
deletionForm: CdFormGroup;
itemDescription: 'entry';
actionDescription = 'delete';
constructor(public modalRef: BsModalRef) {}
ngOnInit() {
this.deletionForm = new CdFormGroup({
confirmation: new FormControl(false, [Validators.requiredTrue])
});
if (!(this.submitAction || this.submitActionObservable)) {
throw new Error('No submit action defined');
}
}
callSubmitAction() {
if (this.submitActionObservable) {
this.submitActionObservable().subscribe(
null,
this.stopLoadingSpinner.bind(this),
this.hideModal.bind(this)
);
} else {
this.submitAction();
}
}
hideModal() {
this.modalRef.hide();
}
stopLoadingSpinner() {
this.deletionForm.setErrors({ cdSubmitButton: true });
}
}
<cd-modal #modal
[modalRef]="modalRef">
<ng-container class="modal-title">
<ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
</ng-container>
<ng-container class="modal-content">
<form name="deletionForm"
#formDir="ngForm"
[formGroup]="deletionForm"
novalidate>
<div class="modal-body">
<ng-container *ngTemplateOutlet="bodyTemplate; context: bodyContext"></ng-container>
<div class="question">
<p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected {{ itemDescription }}?</p>
<div class="form-group"
[ngClass]="{'has-error': deletionForm.showError('confirmation', formDir)}">
<div class="checkbox checkbox-primary">
<input type="checkbox"
name="confirmation"
id="confirmation"
formControlName="confirmation"
autofocus>
<label i18n
for="confirmation">Yes, I am sure.</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<cd-submit-button #submitButton
[form]="deletionForm"
(submitAction)="callSubmitAction()">
<ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
</cd-submit-button>
<cd-back-button [back]="modalRef.hide"
name="Cancel"
i18n-name>
</cd-back-button>
</div>
</form>
</ng-container>
</cd-modal>
<ng-template #deletionHeading>
{{ actionDescription | titlecase }} {{ itemDescription }}
</ng-template>
.modal-body .question {
font-weight: bold;
margin-top: 1em;
}
.modal-body .question .checkbox {
padding-top: 7px;
}
Legend
Html element with directive