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

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

这是您应该如何调用这些小部件的示例。 请参阅DevExtremefor 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;
}