如何使用活性形式引導下拉在angular2應用

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);   
} 

我希望，這可以幫助你解決你的問題。