Angular 2 - ng-bootstrap dropdown with formControlName

问题

Is there a way to make the ng-bootstrap dropdown control work with Angular's reactive forms?

Given:

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

How can one use the formControlName much like used on inputs?

<input formControlName="name" />

回答1:

Unfortunately, ng-bootstrap dropdown can't be used as a form control out-of-the-box.

But it's possible to create your own component that will be used as a form control. To do it, you need to implement ControlValueAccessor interface. You can read more in this article: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

回答2:

I've made custom dropdown using ng-bootstrap and I'll give you description how I resolved it.

Change button for opening dropdown with input tag. Make it readonly and add action on click to open ngbDropdown (dropdown.open() in code example). For every item in the list add on click event to set formControl value.

Working example: https://stackblitz.com/edit/angular-46axva

回答3:

You can do it like below code with little manipulation as per your requirement.

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

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

Output: you will get output using below code

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

I hope, this may help you to solve your problem.

来源：https://stackoverflow.com/questions/42098355/angular-2-ng-bootstrap-dropdown-with-formcontrolname

标签

angular

ng-bootstrap