Angular 如何使devextreme dx自动完成仅为数字
我最初有一个dxNumberBox,它将输入限制为仅数字,但我必须将其转换为dx autocomplete,以便能够向其提供数据源并使autocomplete可用 如何使dx自动完成仅接受编号 原始数字框:Angular 如何使devextreme dx自动完成仅为数字,angular,devextreme,devextreme-angular,Angular,Devextreme,Devextreme Angular,我最初有一个dxNumberBox,它将输入限制为仅数字,但我必须将其转换为dx autocomplete,以便能够向其提供数据源并使autocomplete可用 如何使dx自动完成仅接受编号 原始数字框: <dx-number-box [(ngModel)]="jobNo" value="" placeholder="JobNo..." sty
<dx-number-box [(ngModel)]="jobNo"
value=""
placeholder="JobNo..."
stylingMode="outlined">
</dx-number-box>
dx自动完成:
<dx-autocomplete [(ngModel)]="jobNo"
searchMode="startswith"
[dataSource]="storedJobNumbers"
placeholder="JobNo..."
stylingMode="outlined">
</dx-autocomplete>
到目前为止,我一直在尝试elementAttr、inputtr、type等。可能我只是用错了。首先,确保您的
数据源是一个字符串数组(即使这些字符串表示数字,因为
不支持数字数组)。
i、 e;使用这个:
["1", "564", "9001", "154", ...]
[1, 564, 9001, 154, ...]
与此相反:
["1", "564", "9001", "154", ...]
[1, 564, 9001, 154, ...]
然后,为了限制用户输入,我不认为有现成的选项,但我或多或少使用以下方法:
<dx-autocomplete
(onPaste)="paste($event)"
(onKeyPress)="keyPress($event)"
[dataSource]="source">
</dx-autocomplete>
请注意,您也可以使用onInput
事件在一个事件中同时覆盖按键和粘贴,但其工作方式略有不同(自动完成的值将在keypress/paste/…上更改,但如果输入的不是数字,您可以对其进行修剪)
让我知道这是否对您有效:)
更新:
添加检查删除事件
Devextreme没有自己的onDrop
事件,但是常规浏览器drop
事件可以正常工作,如下所示:
<dx-autocomplete ...
(drop)="drop($event)"></dx-autocomplete>
作为预防措施,您应该始终假设用户在使用该数据之前以某种方式输入了意外的输入
在您的特定场景中,这没关系,因为字段所做的只是尝试自动完成输入(意味着错误的输入不会给出任何预填充的答案,这并不可怕),但是如果数据用于更重要的事情(后端API调用),你应该经常检查输入,看看它是否格式不正确。我更新了答案,加入了一个在发布后发现的额外用例