set hidden form field value with selected value

Question

currently I'm trying to get the selected value form a dxSelectBox and assign it to a hidden form field. I have tried it in the markup with template reference and I have tried it in the controller file (access the DxiItemComponent and get its value.

Actual, I have this markup:

<dxi-item #selectBox dataField="managerId" [label]="{text: 'Felettes'}"
              editorType="dxSelectBox"
              [editorOptions]="{dataSource: managers,
                                valueExpr: 'id',
                                displayExpr: 'name',
                                placeholder: 'Kérlek válassz',
                                searchEnabled: true,
                                searchExpr: 'name',
                                searchMode: 'contains',
                                openOnFieldClick: true,
                                deferRendering: false,
                                noDataText: 'Nincs megjelenítendő adat',
                                onValueChanged: managerNameChanged}">
      <dxi-validation-rule type="required" message="A mező kitöltése kötelező"></dxi-validation-rule>
    </dxi-item>
    <dxi-item dataField="manager.name" value="selectBox.value.name"></dxi-item>

And the managerNameChanged looks like this:

  managerNameChanged() {
    alert(this.selectBox._value);
  }

But I get undefined for the selectBox. I declare it like this:

  @ViewChild("selectBox") selectBox: DxiItemComponent;

So, the question is, how do I get the value for the dxSeletBox editor?

Answer 1

I solved it. I declared a template inside the form item like this:

<div *dxTemplate>
        <dx-select-box
                       #selectBox
                       [dataSource]="managers"
                       valueExpr="id"
                       displayExpr="name"
                       placeholder="Kérlek válassz"
                       searchEnabled="true"
                       searchExpr="name"
                       searchMode="contains"
                       openOnFieldClick="true"
                       deferRendering="false"
                       noDataText="Nincs megjelenítendő adat"
                       (onValueChanged)="managerNameChanged()">
        </dx-select-box>
      </div>

Then set the other field value like this:

<dxi-item dataField="manager.name" [editorOptions]="{ value: managerName }"></dxi-item>

In the controller:

  @ViewChild("selectBox") selectBox: DxSelectBoxComponent;
managerNameChanged() {
    this.managerName = this.selectBox.displayValue;
  }