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> 

どのように1は、入力に使用同じよう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"} 

が、これはあなたが解決するのを助けることができるあなたは、コードの下に使用して出力を取得しますあなたの問題。