Asymmetrik/ngx-starter

<asy-modal
    [title]="data.title"
    [cancelText]="data.cancelText ?? 'Cancel'"
    [disableOk]="!modalForm.form.valid"
    [hideCancel]="data.hideCancel ?? false"
    [okText]="data.okText ?? 'OK'"
    (cancel)="cancel()"
    (ok)="ok()"
>
    @if (data.message) {
        <p [innerHTML]="data.message"></p>
    }
    <form id="modalForm" #modalForm="ngForm">
        @for (input of data.inputs; track input; let isFirst = $first) {
            <div class="mb-3">
                <label [class.form-required]="input.required" for="dialog-input-{{ input.key }}">
                    {{ input.label }}
                </label>
                @if (input.type === 'textarea') {
                    <textarea
                        class="form-control text-area"
                        id="dialog-input-{{ input.key }}"
                        [name]="input.key"
                        placeholder="Enter {{ input.label }}..."
                        [(ngModel)]="formData[input.key]"
                        [required]="input.required"
                    >
                    </textarea>
                }
                @if (input.type !== 'textarea') {
                    <input
                        class="form-control"
                        [name]="input.key"
                        [type]="input.type"
                        placeholder="Enter {{ input.label | lowercase }}..."
                        [(ngModel)]="formData[input.key]"
                        [required]="input.required"
                    />
                }
            </div>
        }
    </form>
</asy-modal>