как я могу сделать devextreme dx-autocomplete, чтобы быть только номером - PullRequest
Новая
       77

как я могу сделать devextreme dx-autocomplete, чтобы быть только номером

0 голосов
/ 19 сентября 2019

У меня изначально был dxNumberBox, который ограничивает ввод только числами, но мне пришлось преобразовать его в dx-autocomplete, чтобы иметь возможность передать ему источник данных и сделать автозаполнение доступным

Как я могу сделать dx-автозаполнение принимать только номер?

Оригинальный NumberBox: 

<dx-number-box [(ngModel)]="jobNo"                         
            value=""            
            placeholder="JobNo..."
            stylingMode="outlined">
        </dx-number-box>

dx-autocomplete: 

          <dx-autocomplete [(ngModel)]="jobNo"                              
              searchMode="startswith"
              [dataSource]="storedJobNumbers"                                             
              placeholder="JobNo..."
              stylingMode="outlined">                  
          </dx-autocomplete>

Я экспериментировал с elementAttr, inputAttr, type и т. Д., Но безуспешно.Может быть, я просто неправильно его использую.

1 Ответ

1 голос
/ 19 сентября 2019

Прежде всего, убедитесь, что ваш 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 event

Devextreme не имеет своего собственного события onDrop, но обычное событие браузера drop прекрасно работает так: 

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

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

Какпредосторожность, вы всегда должны предполагать, что пользователь сумел как-то ввести неожиданный ввод, прежде чем использовать эти данные.

В вашем конкретном сценарии все в порядке, потому что все поле делает попытку автозаполнения ввода (то есть неправильный ввод просто не даст никакого предварительно заполненного ответа, что не является ужасным), но если данные используются для чего-тоболее важно (вызовы API-интерфейса), вы всегда должны проверять ввод, чтобы убедиться, что он не деформирован.

...