угловой 4: ngb-dropdown- formcontrolName не работает

Question

Я использую ng-bootstrap": "1.0.0-alpha и angular version 4.3.1.Я пытаюсь использовать formControlName из reactive-forms угловых.здесь мой фрагмент кода.

<div class="dropdown dropdown-val-label" ngbDropdown #suggestionDropDown="ngbDropdown" [autoClose]="true">
  <button [formControlName]="field.fieldName" class="btn btn-sm btn-secondary mw-100 dropdown-btn-toggle edit-custom-input"
    ngbDropdownToggle> Select</button>
  <div class="dropdown-menu dynamic-dropdown">
    <div class="dynamic-list-wrapper" virtualScroll [childHeight]="12" #scrollingBlock [items]="metadataList[field.fieldName]">
      <div #container>
        <div *ngFor="let item of  scrollingBlock.viewPortItems | slice:0:10">
          <a class="dropdown-item">{{item.name}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

, где мой metadataList[field.fieldName] возвращает объект типа {"id": 1, "name": "xyz"}.

Объект формы

  setForGroup(row) {
    let _self = this;
    let tmpFormGroups = {};
    _.each(row.groups, function (obj: any) {
      let tmpGroup: any = {};
      _.each(obj.value, function (aryObj: any) {
        tmpGroup[aryObj.fieldName] = aryObj.value;
      });
      tmpFormGroups[obj.key] = _self.fb.array([
        _self.fb.group(tmpGroup)
      ]);

    });
    this.formGroupObj = _self.fb.group(tmpFormGroups);
  }