В inputModelChange смотрю что в this.inputModel и если не тот символ, то меняю. Например 5 меняю на x и все работает. Но если менять на пустой символ, то он в модели меняется, но в input отображается например пробовал 6 менять на ''. Как такую задачу решать не пойму? Хочу запрещать ввод определенных символов или менять их на другие.
<input [(ngModel)]="inputModel"
(ngModelChange)="inputModelChange($event)"
>
У тебя тут дублирование ивентов [(ngModel)] это то же самое, что и [ngModel] + (ngModelChange) Попробуй так ``` <input [ngModel]="inputModel" (ngModelChange)="inputModelChange($event)" > ```
Попробовал, поведение такое же. Получается если я в модель тоже строковое значение устанавливаю, в инпуте почему-то оно не обновляется( неужели ещё и в инпуте надо руками менять. Почему 6 отображается, хотя в модели ее нет. Попробовал так, работает. Но выглядит как костыль, явно должен быть способ правильнее. const newValue = this.inputCallback(this.inputModel); this.inputModel = newValue; this.inputField.nativeElement.value = newValue;
скинь код, что выполняется в методе inputModelChange($event)
Да там так для проверки. return value.replace(/5/g, 'x').replace(/6/g, '');
а почему ретурн? Надо присвоить this.inputModel получившееся значение
Так норм работает, но не пойму почему и в модель надо писать и в input. Если в input не буду писать, то 5 заменятся на x, а 6 на пустое значение нет. Хотя в модели 6 не будет.
<input [ngModel]="inputModel" (ngModelChange)="inputModelChange($event)" > inputModelChange(value: string): void { this.inputModel = this.inputCallback(value); }
banana убрал сразу. Не помогает. Причем когда ввожу пять, она отображается как x. Хотя по консоли в nativeElement лежит 5. Видимо она потом в нативном инпуте обновляется. Но для 6, когда пустое значение обновления не происходит. Элементарная задача и чет нагуглить даже не могу)
ты хочешь маску сделать?
Не маску, а замену одних символов на другие. В том числе какой-то символ поменять на пустой.
Чекни мой пример. Может поможет
там через keyup, а если ctrl-c вставлять будут оно сработает)?
через ctrl-v работает
Посмотрю, но все равно кажется что смотреть на keyup это какой то обходной путь. У меня этот компонент уже с CVA и его методы для другого заняты(
в общем, запустил я подобный пример у себя. 1. В инпуте лежит какое-то значение 2. Это значение эквивалентно проперти в компоненте 3. Ты пишешь в инпуте что-то 4. Срабатывает событие ngModelChange. 5. Сразу же удаляетсяудаляешь ненужный символ. 6. В инпуте осталось лежать новое неправильное значение 7. В inputModel записалось новое исправленное 8. Это новое исправленное значение равно старому до того, как ты ввёл. 9. Из-за того, что новое значение равно предыдущему, не срабатывает чейндж-детекшн. Как-то так
Хм, спасибо за объяснения, т. е. если onPush убрать должно заработать? Или вручную проверку вызывать?
при дефолтной стратегии я попробовал сделать detectChange(), не сработало
Видимо где-то в кишках ангуляра надо смотреть. Да и с его стороны логично, если модель та же, зачем менять инпут. Спасибо
Пока не смог найти) если кто посоветует, буду благодарен.
Так мне не маска нужна, а заменять введенное другим, например транслитеризацию реализовать
это и есть маска)
Так, надо будет тогда посмотреть, спасибо)
Обсуждают сегодня