angle2アプリケーションでブートストラップドロップダウンで反応形式を使用する方法

Question

import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; 
// or 
import { BsDropdownModule } from 'ngx-bootstrap'; 

@NgModule({ 
    imports: [BsDropdownModule.forRoot(),...] 
}) 
export class AppModule(){} 

<div class="btn-group" dropdown> 
    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle"> 
    Button dropdown <span class="caret"></span> 
    </button> 
    <ul *dropdownMenu class="dropdown-menu" role="menu"> 
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> 
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> 
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li> 
    <li class="divider dropdown-divider"></li> 
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a> 
    </li> 
    </ul> 
</div> 

上記のコードではどこで私はformControlNameを使用しますか？テンプレートフォームの場合はかなり簡単です。しかし、Reactiveでは、それが入力ではない場合、どのように私の更新のモデル値を得ることができますか？

Answer 1

あなたの要件に応じて少しの操作で、以下のコードのようにすることができます。

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</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> 
    <li></li> 
    <li><a class="dropdown-item" (click)="onDropdownSelect($event)">Separated link</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);   
} 

私は願って、これはあなたの問題を解決するために、あなたを助けるかもしれません。