Использование труб в ngModel для элементов INPUT в угловом
У меня есть поле HTML INPUT.
и я хочу отформатировать его значение и использовать существующий канал:
.... [(ngModel)]="item.value | useMyPipeToFormatThatValue" .....
и получите сообщение об ошибке:
- Угловое - использование труб в услугах и компонентах
- Связывает Angularjs с новым элементом html динамически
- Итерация над объектом в Угловом
- Angular2 Exception: не может привязываться к «routerLink», поскольку он не является известным родным свойством
- Angularjs препятствуют отправке формы при неудачной проверке ввода
Не может иметь трубку в выражении действия
Как использовать каналы в этом контексте?
- Запускать функцию controllerа всякий раз, когда открывается или отображается вид
- Springboot / Angular2 - Как обрабатывать URL-адреса HTML5?
- Почему мы используем оператор «?» В привязке шаблона в угловом 2
- Как отправить форму на сервер в Angular2?
- Угловой фильтр 2 / список поиска
- Использование разрешения в Angular2 Routes
- Преобразование обещаний в наблюдаемые
- Как использовать HashLocationStrategy с виджем Auth0 Lock для входа пользователя
Вы не можете использовать операторы выражения шаблона (pipe, save navigator) в инструкции шаблона:
(ngModelChange)="Template statements"
(ngModelChange) = “item.value | useMyPipeToFormatThatValue = $ event”
https://angular.io/guide/template-syntax#template-statements
Как и выражения шаблонов, операторы шаблонов используют язык, похожий на JavaScript. Парсер анализатора шаблонов отличается от синтаксического анализатора шаблонов и, в частности, поддерживает как базовое присваивание (=), так и цепочки выражений (с; или,).
Однако определенный синтаксис JavaScript не допускается :
- новый
- операторы приращения и уменьшения, ++ и –
- оператор, например, + = и – =
- поразрядные операторы | а также &
- операторы выражения шаблона
Поэтому вы должны написать его следующим образом:
Пример плунжера
Решение здесь состоит в том, чтобы разделить привязку на одностороннюю привязку и привязку события, которая действительно включает синтаксис [(ngModel)] . [] – синтаксис одностороннего связывания и () – синтаксис привязки события. При использовании вместе – [()] Угловой признает это как стенографию и связывает двухстороннюю привязку в форме односторонней привязки и привязки события к значению объекта компонента.
Причина, по которой вы не можете использовать [()] с трубой, заключается в том, что трубы работают только с односторонними связями. Поэтому вы должны разделить трубу только на одностороннюю привязку и обрабатывать событие отдельно.
Дополнительную информацию см. В разделе Симулятор углового шаблона .
Я пробовал решения выше, но значение, которое идет к модели, было форматированным значением, а затем возвращалось и давало мне ошибки CurrencyPipe. Поэтому мне пришлось
[ngModel]="transfer.amount | currency:'USD':true" (blur)="addToAmount($event.target.value)" (keypress)="validateOnlyNumbers($event)"
И по функции addToAmount -> change on blur вызывают проблемы с ngModelChange.
removeCurrencyPipeFormat(formatedNumber){ return formatedNumber.replace(/[$,]/g,"") }
И удаление других не числовых значений.
validateOnlyNumbers(evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); var regex = /[0-9]|\./; if( !regex.test(key) ) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); }
Мое решение приведено ниже здесь searchDetail – это объект.
Я хотел бы добавить еще один пункт к принятому ответу.
Если тип вашего управления вводом не является текстом, труба не работает.
Помните об этом и сохраняйте свое время.