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

标签 angular ng-bootstrap

有没有办法让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" />

最佳答案

不幸的是,ng-bootstrap 下拉菜单不能用作开箱即用的表单控件。

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

关于Angular 2 - 带有 formControlName 的 ng-bootstrap 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42098355/

相关文章:

angular - PrimeNG 自动完成与对象绑定(bind)

javascript - 响应式设计在 Angular 2 中是如何工作的?

javascript - Angular 6,物化 : initializing javascript

css - bootstrap-flex、bootstrap-grid 和 bootstrap-reboot 之间的区别

angular2 ngbdatepicker 如何格式化输入字段中的日期

angular - 如何将参数传递给模态?

Angular:延迟加载模块不调用 InjectionToken 工厂

javascript - 函数问题, Angular typescript ,匹配 2 个数组中的 id 值以获取其中之一的索引

javascript - Ng-Bootstrap 导航(选项卡)不显示任何选项卡的内容

Angular:如何将输入集中在 ngbDropdown 菜单中?