File
|
Public
config
|
Type : DfModalConfig
|
Decorators :
@Inject(NX_MODAL_DATA)
|
|
|
|
dynamicFormID
|
Default value : Math.random().toString(36).slice(2, 7)
|
|
|
|
modalForm
|
Type : UntypedFormGroup
|
Default value : new UntypedFormGroup({})
|
|
|
import { Component, Inject } from '@angular/core';
import { NX_MODAL_DATA, NxModalRef } from '@aposin/ng-aquila/modal';
import { UntypedFormGroup } from '@angular/forms';
import { DfModalButton, DfModalConfig, DfModalResult } from './modal.model';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'dynamic-form-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss'],
standalone: false
})
export class DfModalComponent {
modalForm: UntypedFormGroup = new UntypedFormGroup({});
dynamicFormID = Math.random().toString(36).slice(2, 7);
constructor(
@Inject(NX_MODAL_DATA) public config: DfModalConfig,
private ref: NxModalRef<DfModalComponent, DfModalResult>
) {}
buttonHandler(button: DfModalButton) {
this.ref.close({
id: button.id,
button: button.type,
formValue: this.modalForm.value
});
}
}
<div>
<form [formGroup]="modalForm">
<df-form [id]="dynamicFormID" [formConfig]="config.formConfig"> </df-form>
</form>
</div>
<div class="modal-footer">
<div class="modal-button" *ngFor="let button of config.buttons">
<button nxButton="block {{ button.type }}" type="button" (click)="buttonHandler(button)">
{{ button.text }}
</button>
</div>
</div>
@use '../breakpoints.scss' as *;
.modal-footer {
margin-top: 24px;
display: flex;
justify-content: space-between;
@media (max-width: $breakpoint-m) {
flex-direction: column-reverse;
}
.modal-button {
width: 100%;
}
// Add a space between the 2 buttons
.modal-button:first-child {
margin-right: 32px;
@media (max-width: $breakpoint-m) {
margin-right: 0;
margin-top: 24px;
}
}
.modal-button:last-child {
margin-right: 0;
}
}
Legend
Html element with directive