Using igx-drop-down in a reactive form

610

Jeff Kelso posted over 6 years ago

I seem to be having trouble using an igx-drop-down in a reactive form. Your sample uses a combo box. Any help will be appreciated.

Thanks,

Top Replies

610

Offline Jeff Kelso posted over 6 years ago in reply to Ivaylo Ganchev +1 verified
Thanks for the suggestions. As always, very helpful. JK

Parents

10685

Offline Ivaylo Ganchev posted over 6 years ago
Thank you for posting in our community!

In general, there are several key points here.

Every component to be used in a reactive form should implement ControlValueAccessor Interface. IgxDropDown does not. IgxCombo does it out-of-the-box.

The IgxDropDown does not contain an input on its own.

So in order to implement a somewhat similar to the IgxCombo component, it will basically require creating a custom component utilizing an input and IgxDropDown for example plus implementing ControlValueAccessor Interface.

Why is that you wish to use the IgxDropDown instead of the IgxCombo? The second is built upon the first one and provides more functionality and flexibility. Is it because you require a single selection only or else? If you are after simplified combo version with single selection, it could be considered a new feature request. I suggest you to “vote” for implementing such a “Single Select” component. When planning new releases, our Product Management team will look at the most popular features and use your feedback to prioritize upcoming work.

I am looking forward more feedback from you!

Related samples:

Reactive Forms Integration

IgxCombo

IgxDropDown
Cancel
Reply

Cancel
610

Offline Jeff Kelso posted over 6 years ago in reply to Ivaylo Ganchev

Thanks for the quick response. You are correct, I'm looking to a component that I can enforce a single selection. I will vote for this new feature. In the mean time, is there any way I can simulate this single selection in an IgxCombo?

Thanks,

JK
Cancel
Reply

Cancel

Reply

610

Offline Jeff Kelso posted over 6 years ago in reply to Jeff Kelso

I think I've come up with a work around to limit the user to 1 choice in the igx-combo. I've add some logic in the onClosing event that will check if multiples have been selected and display a dialog box and revert to the original value.

HTML

-------

<div class="form-group">

<label class="col-md-2 control-label" for="flowDirection">Flow Direction</label>

<div class="col-md-8">

<igx-combo (onClosing)='handleClosing($event)' #comboFlowDirection id="flowDirection" name="work"

[data]="flowDirections" placeholder="Select a Flow Direction" searchPlaceholder="Search..."

formControlName="flowDirection" [filterable]="filterable" [itemsMaxHeight]="250">

</igx-combo>

<igx-dialog #MyDialog title="Warning" message="You have selected more than 1 item!" leftButtonLabel="OK"

(onLeftButtonSelect)="MyDialog.close()">

</igx-dialog>

</div>

</div>

TS Code

-----------

@ViewChild("comboFlowDirection", { read: IgxComboComponent })

private comboFlowDirection: IgxComboComponent;

handleClosing() {

let selectedItems = this.comboFlowDirection.selectedItems();

if (selectedItems.length > 1) {

this.MyDialog.open();

this.comboFlowDirection.deselectAllItems();

if (this.workingQueueFlow.FlowDirection != null) {

this.comboFlowDirection.selectItems([this.workingQueueFlow.FlowDirection]);

}

}

}

If there's an easier solution feel free to post your comments.

JK
Cancel
Reply

Cancel

Children

610

Verified Answer
Offline Jeff Kelso posted over 6 years ago in reply to Ivaylo Ganchev

Thanks for the suggestions. As always, very helpful.

JK
Cancel
Reply

Reject Answer

Cancel
10685

Offline Ivaylo Ganchev posted over 6 years ago in reply to Jeff Kelso

Hello JK,

Thank you for your feedback! Sharing in the community benefits all users.

I am glad you found a suitable solution. In case you are interested in an alternative, you may consider using a combination of igx-input-group and igx-drop-down to mimic a single selection combo.

You will find such an implementation here: https://stackblitz.com/edit/combo-single-selection-ig . Optionally it should be possible to implement ControlValueAccessor as well, in order to use it in a reactive form.
Cancel
Reply

Cancel