Question

最初，我有一个dxNumberBox，它仅将输入限制为数字，但我不得不将其转换为dx-autocomplete，以便能够为它提供数据源并提供自动完成功能

我怎样才能使dx-autocomplete接受编号？

原始数字框：

<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，inputAttr，type等，但没有运气。也许我只是使用不正确。

Answer 1

首先，请确保您的dataSource是一个字符串数组（即使这些字符串代表数字，因为<dx-autocomplete>不支持数字数组）。即使用此功能：

["1", "564", "9001", "154", ...]

与此相反：

[1, 564, 9001, 154, ...]

然后限制用户输入，我不相信有一个开箱即用的选项，但这是我或多或少使用的方法：

<dx-autocomplete 
  (onPaste)="paste($event)" 
  (onKeyPress)="keyPress($event)" 
  [dataSource]="source">
</dx-autocomplete>

使用onPaste和onKeyPress事件，然后在绑定函数中检查输入并采取相应的措施。一个简单的检查可能看起来像这样（但是如果需要，您可以对其进行更彻底的检查）：

/*Stops the event from occurring if the data being paste isn't a number*/
paste(e) {
  if(isNaN(e.event.clipboardData.getData('text'))){
    e.event.preventDefault();
  }
}
/*Stops the event from occurring if the key pressed isn't a number*/
keyPress(e) {
  if(isNaN(+e.event.key)||e.key === " ") {
    e.event.preventDefault();
  }
}

请注意，您还可以使用onInput事件来覆盖按键和粘贴事件，但是它的工作方式略有不同（自动完成的值将在按键/粘贴/ ...上更改，但是如果输入的内容不是数字，则可以修整它。

让我知道这是否适合您：）

更新： 添加对drop事件的检查

Devextreme没有自己的onDrop事件，但是常规的浏览器drop事件的工作原理如下：

<dx-autocomplete ...
(drop)="drop($event)"></dx-autocomplete>

drop(e) {
    if(isNaN(e.dataTransfer.getData('text'))){
      e.preventDefault()
    }
  }

作为预防措施，您始终应假定用户在使用该数据之前以某种方式设法进行了意外输入。

在您的特定情况下没关系，因为所有字段所做的只是尝试自动完成输入（意味着错误的输入只会给出任何预填的答案，这并不可怕），但是如果数据用于更重要的事情（后端API调用），则应始终检查输入内容，看其是否格式正确。

我怎样才能使devextreme dx-autocomplete成为数字

1 个答案: