Angular 2 - ng-bootstrap dropdown mit formControlName

Question

Gibt es eine Möglichkeit, die ng-bootstrap dropdown control mit Angulars reaktiven Formen arbeiten zu lassen?

<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> 

Wie kann man die formControlName verwenden viel wie an den Eingängen verwendet:

gegeben?

<input formControlName="name" /> 

Answer 1

Leider ng-bootstrap Drop-Down kann nicht als eine Form Kontrolle out-of-the-Box verwendet werden.

Es ist jedoch möglich, eine eigene Komponente zu erstellen, die als Formularsteuerung verwendet wird. Um dies zu tun, müssen Sie ControlValueAccessor Schnittstelle implementieren. Sie können mehr in diesem Artikel lesen: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 2

Sie können es wie unten Code mit wenig Manipulation nach Ihrer Anforderung tun.

HTML-Code:

<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> 

Angular Komponente:

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

Ausgang: werden Sie Ausgabe mit folgenden Code

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

Ich hoffe bekommen, das Sie lösen helfen können Ihr Problem.