Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat(form): Apply pipe to display value of input field

See original GitHub issue

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request

Current behavior Cannot apply a pipe to the display value of an input field.

Desired behavior I’d like to be able to apply a pipe to the display value of an input. Suppose I have a pipe which converts a whole number of cents into dollars and adds a dollar sign, e.g., “110” => “$1.10”. As a user is typing, I’d like to apply the pipe to the displayed value while the value of the input field remains 110, i.e., only apply the pipe to the display of the field’s value.

Here’s a Plnkr which shows the input field and the value of the input run through the pipe. I’d like the actual displayed value in the input field to look like content below the input field.

http://plnkr.co/edit/NgNoxQ2GTUYKmEYjnYAh?p=preview

And here’s my SO question about this feature, demonstrated in Angular Material:

http://stackoverflow.com/questions/40855106/transform-md-input-value-via-pipe

What is the motivation / use case for changing the behavior? This specific scenario is a common use-case in finance-related applications but the scenario is general, date formats, etc.

Please tell us about your environment:

OpenSUSE 13.2 Linux, Emacs, … N/A

Angular version: 2.0.X 2.x
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] All
Language: [all | TypeScript X.X | ES6/7 | ES5] All
Node (for AoT issues): node --version =