Реактивные формы Входные данные в формате Angular
Привет, я новичок в формах Angular Reactive и пытаюсь понять это.
Что я хочу сделать, так это отформатировать входные данные в верхнем регистре:/
<input #stateInput matInput type = "text"
formControlName = "state"
[matAutocomplete] = "autoState" maxlength = "2"
(keyup) = "stateInput.value.toUpperCase()"
required>
Я не смог заставить это работать?
Любая помощь приветствуется
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
вы можете просто использовать приведенный ниже код, который мгновенно преобразует ввод в UpperCase,
oninput = "this.value = this.value.toUpperCase()"
вот пример Пример
Для достижения ожидаемого результата используйте опцию ниже
Проблема: После изменения входного значения в верхний регистр его необходимо переназначить для отображения в поле ввода.
<input
type = "text"
[formControl] = "state"
#stateInput
(keyup) = "stateInput.value = stateInput.value.toUpperCase()"
/>код песочницы для справки - https://codesandbox.io/s/6l9nk4k2zn
проблема с вашим кодом заключается в том, что вы пытаетесь нажать клавишу в середине ввода
@Eliseo, этот сценарий невозможен в соответствии с вопросом SO, так как максимальная длина составляет всего два
::glups:: я не вижу этой детали
@Eliseo, я только что попытался нажать клавишу в середине ввода, он работает, как и ожидалось - codeandbox.io/s/0pwrknw97l .. Это работает в этом сценарии, потому что я меняю полное входное значение на верхний регистр, а не на основе местоположения :)
когда я набираю "abde", и я ставлю курсор между b и d и набираю c (чтобы сформировать "abcde", курсор переходит в конец ввода. Поэтому, если вы напишете в html {{state.value} }, вы можете видеть, что значение не слишком большое. Если вы поместите maxlength = "2" и наберете ab, перейдите к первому, уберите "a" и введите C, курсор также дойдет до конца
... Если вы хотите контролировать положение курсора, вам нужно «поиграть» с «selectionStart и selectionEnd элемента html, некоторые из них похожи на «сложную» директиву в stackoverflow.com/questions/55086460/…. Чтобы преобразовать в верхний я думаю, что это слишком много кода
Мне нравится использовать
<input style = "text-transform:uppercase">и при отправке преобразовать переменную. Другой способ, который вы должны учитывать, если вы вводите в середине ввода