使用所选值设置隐藏的表单字段值

Question

目前我正在尝试从 dxSelectBox 中获取选定的值并将其分配给隐藏的表单字段。我已经在带有模板引用的标记中尝试过它，我已经在控制器文件中尝试过它（访问 DxiItemComponent 并获取它的值。

实际上，我有这个标记：

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

managerNameChanged 看起来像这样：

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

但我对 selectBox 未定义。我这样声明：

  @ViewChild("selectBox") selectBox: DxiItemComponent;

所以，问题是，如何获取 dxSeletBox 编辑器的值？

Answer 1

这是您应如何调用这些小部件的示例。参见 documentation of DevExtreme for Angular

@ViewChild("targetDataGrid", { static: false }) dataGrid: DxDataGridComponent

Answer 2

我解决了。我在表单项中声明了一个模板，如下所示：

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

然后像这样设置其他字段值：

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

在控制器中：

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

使用所选值设置隐藏的表单字段值

set hidden form field value with selected value

angular

devextreme-angular