Unable to find Multi-Selection dropdown in any of demos
Hello KeenThemes,
Thank you for your previous help.
I'm currently using Angular for my UI, and while working with dropdowns, I've noticed that most of the demos feature single-selection dropdowns. However, as per my requirements, I need a multi-selection dropdown using KeenThemes.
Could you please guide me or provide an example that supports multiple selections?
This is my single selection dropdown code
<div *ngIf="templateModel.scope == 2" class="col-md-6 fv-row mb-7">
<label for="group" class="required fw-semibold fs-6 mb-2">Group</label>
<div>
<select class="form-select form-select-solid"
data-kt-select2="true" data-placeholder="Select option"
data-allow-clear="true" name="groupId"
[(ngModel)]="templateModel.groupId" #group="ngModel"
required
[disabled]="isDisableAccount()">
<option *ngFor="let option of groupsData"
[value]="option.id">{{ option.name }}
</option>
</select>
<div *ngIf="group.invalid && (group.dirty || group.touched)"
class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
<div *ngIf="group.errors?.['required']">group is required</div>
</div>
</div>
</div>
Replies (1)
Hi
You mainly need to:
Add multiple to your <select>.
Adjust the binding to handle an array (e.g. [(ngModel)]="templateModel.groupIds").
Make sure groupsData stays compatible (should be a list of {id, name}).
<div *ngIf="templateModel.scope == 2" class="col-md-6 fv-row mb-7">
<label for="group" class="required fw-semibold fs-6 mb-2">Group</label>
<div>
<select
class="form-select form-select-solid"
data-kt-select2="true"
data-placeholder="Select options"
data-allow-clear="true"
name="groupIds"
multiple
[(ngModel)]="templateModel.groupIds"
#group="ngModel"
required
[disabled]="isDisableAccount()"
>
<option *ngFor="let option of groupsData" [value]="option.id">
{{ option.name }}
</option>
</select>
<div
*ngIf="group.invalid && (group.dirty || group.touched)"
class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"
>
<div *ngIf="group.errors?.["required"]">At least one group is required</div>
</div>
</div>
</div>[(ngModel)]="templateModel.groupIds" should be an array like [1, 2, 3].
You might also need to re-trigger KTApp.initComponents() (or however KeenThemes bootstraps) if you dynamically load this field.
If you're using validation, make sure to handle it for arrays.
Thanks
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
