title: Custom getters/setters for formInput.value in Angular?
body: <p>I'd like to be able to create a formal separation between the underlying value of a form input, how it's displayed and then how user input is transformed back into the underlying value.</p>
  <h3>Transforming the value as displayed in the formInput</h3>
  <p>Let's say I'm designing the logic for allowing users to format the value of a cell in a spreadsheet. Let's assume the cell UI is just a textInput.</p>
  <p>I want to allow the user to format the value as a percentage: <code>10%</code> or alternatively as a currency <code>$0.10</code>. In both cases the underlying value is 0.1 but the formatting changes how I display it in my textInput.</p>
  <pre><code>cell.value = 0.1 # number
  
  # format as percentage
  textInput.value = &quot;10%&quot; # string
  
  # format as currency
  textInput.value = &quot;$0.10&quot; # string
  
  # format as number
  textInput.value = 0.1 # number
  
  </code></pre>
  <p>It's obviously not too hard to do this. But it would still be nice if there was a way to do it natively. To distinguish between <code>textInput.value</code> and <code>textInput.displayValue</code>.</p>
  <h3>Transforming the value as parsed from the formInput</h3>
  <p>So continuing the same example from above, we can see that in the first two cases, the value that's in the formInput needs to be transformed before it can be saved to the <code>cell</code>.</p>
  <pre><code># When we update values we see that:
  
  # When formatted as a percentage
  textInput.value = &quot;150%&quot;
  # then
  cell.value = 1.5
  
  # When formatted as a currency
  textInput.value = &quot;$0.10&quot;
  then 
  cell.value = 0.1
  </code></pre>
  <p>I can write code to do all of this but it has the hint of a common problem about it. Does Angular offer anything native to deal with these transformations? Can you have custom getters and setters for <code>formInput.value</code>?</p>