Angular 2 - ng-bootstrap dropdown with formControlName

Question

Is there a way to make the ng-bootstrap dropdown control work with Angular's reactive forms?

Given:

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

How can one use the formControlName much like used on inputs?

<input formControlName="name" />

Instead of button use <input type="button" value="" formControlName="name">? — unitario
– unitario, Commented Feb 7, 2017 at 19:55

Dmytro Yarmak · Accepted Answer · 2017-02-08 05:37:08Z

7

Unfortunately, ng-bootstrap dropdown can't be used as a form control out-of-the-box.

But it's possible to create your own component that will be used as a form control. To do it, you need to implement ControlValueAccessor interface. You can read more in this article: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

answered Feb 8, 2017 at 5:37

Dmytro Yarmak

1,0186 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ZeroOrOne · Accepted Answer · 2018-10-01 14:46:34Z

3

I've made custom dropdown using ng-bootstrap and I'll give you description how I resolved it.

Change button for opening dropdown with input tag. Make it readonly and add action on click to open ngbDropdown (dropdown.open() in code example). For every item in the list add on click event to set formControl value.

Working example: https://stackblitz.com/edit/angular-46axva

edited Oct 1, 2018 at 14:46

answered Oct 1, 2018 at 13:43

ZeroOrOne

1065 bronze badges

Collectives™ on Stack Overflow

Angular 2 - ng-bootstrap dropdown with formControlName

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related