Есть ли способ использовать валюту или пользовательскую трубку внутри входного текста в угловом 2?Угловая 2 Входная пользовательская труба
Я попытался это:
<input [(ngModel)]="order.price | currency"/>
Но без успеха
Есть ли способ использовать валюту или пользовательскую трубку внутри входного текста в угловом 2?Угловая 2 Входная пользовательская труба
Я попытался это:
<input [(ngModel)]="order.price | currency"/>
Но без успеха
Это не представляется возможным использовать трубы в входах, даже в угловой 1.
Что вы ищете маска директивы. Для углового1 существует множество директив, таких как ngMask, angular-input-masks и другие.
Angular2 находится в кандидате на выпуск прямо сейчас (06/02/2016), поэтому есть всего несколько «директив».
Вы также можете создать свой собственный компонент маски.
Я смог использовать angular2-text-mask и text-mask-addons как способ преобразования формата значений входного текстового поля. Документация и соответствующая информация достаточно тщательны, и пример валюты можно увидеть на text-mask demo page.
Хотя я еще не пробовал, this ngconsultant blog post обсуждает технику корректировки входных значений с использованием нескольких ограничений (методы фокуса/размытия браузера) @HostListener.
При любом подходе вам нужно быть осторожным, преобразуете ли вы вход, чтобы сделать пользовательский интерфейс более дружественным для пользователя или если вы хотите использовать/сохранять только правильно отформатированный ввод, привязанный к вашей модели данных в компоненте ,
Что касается первого, если вы хотите удалить форматирование, которое применяется к вводу до его использования, сохранения или передачи, дополнительная работа/код/вмешательство требуется либо в коде компонента, либо в других службах, которые управлять моделью данных для анализа форматирования данных, связанных с входным значением.
(Очень базовое решение обсуждается в this stackoverflow post.)
На самом деле, можно использовать трубы в входов. Но вы должны применить двустороннюю привязку данных с двумя инструкциями. '' '[ngModel] =" myModel | myPipe "(ngModelChange) =" myModel = $ event "' '' Для простых манипуляций он отлично работает, но могут возникать некоторые причуды. – Vector