我怎样才能让devextreme dx-autocomplete只有数字

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> 不支持数字数组。 IE; 使用这个：

["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 事件在一个事件中覆盖按键和粘贴，但它的工作方式略有不同（自动完成的值将在 keypress/paste/...，但如果输入的不是数字，您可以 trim 它）

让我知道这是否适合你:)

更新： 添加对 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只有数字

how can I make a devextreme dx-autocomplete to be number only

devextreme

angular

devextreme-angular