Angular 2 - ng-bootstrap 带有 formControlName 的下拉菜单

Question

有没有办法让 ng-bootstrap dropdown control 与 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 下拉菜单不能用作表单控件 out-of-the-box。

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

Answer 2

我使用 ng-bootstrap 制作了自定义下拉菜单，我将向您说明我是如何解决它的。

更改按钮以使用 input 标签打开下拉菜单。将其设置为 readonly 并在 click 上添加操作以打开 ngbDropdown (dropdown.open() in代码示例）。为列表中的每个项目添加 click 事件以设置 formControl 值。

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

Angular 2 - ng-bootstrap 带有 formControlName 的下拉菜单

Angular 2 - ng-bootstrap dropdown with formControlName

ng-bootstrap

angular