Angular 2 - ng-bootstrap 下拉列表，带有 formControlName

Question

有没有办法让ng-bootstrap下拉控件与Angular的反应式表单一起工作？

鉴于：

<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>

如何使用formControlName，就像在输入上使用一样？

<input formControlName="name" />

Answer 1

遗憾的是，ng-bootstrap下拉列表不能用作现成的窗体控件。

但是，可以创建自己的组件，该组件将用作窗体控件。为此，您需要实现ControlValueAccessor接口。您可以在本文中阅读更多内容：https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 2

我已经使用 ng-bootstrap 制作了自定义下拉列表，我将向您描述我是如何解决它的。

用于打开带有输入标签的下拉列表的更改按钮。将其设为只读，并在单击时添加操作以打开ngbDropdown(代码示例中的dropdown.open(((。对于列表中的每个项目，添加单击事件以设置 formControl 值。

工作示例：https://stackblitz.com/edit/angular-46axva