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下拉列表无法用作开箱即用的表单控件。

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

Answer 2

您可以像下面的代码那样按照您的要求进行少量操作。

HTML代码：

<div class="btn-group dropdown">
    <input [id]="field.id" [formControlName]="field.id" type="text" disabled class="form-control dropdown-toggle">                                    
<ul class="dropdown-menu">
    <li class="active"><a class="dropdown-item" (click)="onDropdownSelect($event)">Action - 1</a></li>
    <li><a class="dropdown-item" (click)="onDropdownSelect($event)">Another action</a></li>
    <li><a class="dropdown-item" (click)="onDropdownSelect($event)">Something else here</a></li>
</ul>
<span role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="input-group-addon dropdown-toggle"><span class="caret"></span>
</span>
</div>

角度组件：

onDropdownSelect(e) {        
// This is to remove 'active' class from all li tags
$(e.target.parentElement.parentElement).find('li.active').removeClass(Constants.common.activeCssClass);

// This is to make form dirty when value selected
(this.form.controls[e.target.parentElement.parentElement.previousElementSibling.id] as FormControl).markAsDirty();

// This is to set selected value in textbox to update form in DOM
 $(e.target.parentElement.parentElement.previousElementSibling).val($(e.target).text());

// This is to set css class to show value as selected
$(e.target.parentElement).addClass(Constants.common.activeCssClass);        
}

输出：您将使用以下代码获得输出

console.log(this.form.value);
{"id": "Action - 1"}

我希望，这可以帮助您解决问题。

Answer 3

我已经使用ng-bootstrap进行了自定义下拉菜单，我将向您介绍如何解决该问题。

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

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

使用formControlName的Angular 2 - ng-bootstrap下拉列表

3 个答案: