title: Angular 8 custom currency mask
body: <p>Right now I am making a currency mask directive that should be compatible with angular reactive forms. Here's my Stackblitz <a href="https://stackblitz.com/edit/angular-8-currency-directive-insert" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-8-currency-directive-insert</a>.</p>
  
  <p>In the input element, I expect that when I enter 1, then 2, then 3, then 4, then 5 that I would see in the console {currency: "$1,234"} because the mask runs .substring(0,4) however I see {currency: "$1,2345"}.
  I see the correct display value of $1,234 within the input element.</p>
  
  <p>If I change .substring(0,4) to .substring(0,3) then the display value within the input element displays $1,23 when I expect it to display $1,234.  The console outputs the correct value of {currency: "$1,234"}</p>
  
  <p>Any suggestions that get to the root of the problem are very welcome!  I have already done work arounds which involve things like splitting into an array, checking, popping off the end, and joining but those fixes are not ideal.  Any suggestions are still welcome though!</p>
  
  <p>Thank you for your support.</p>
  
  <p>The code to focus on is found in currency.directive.ts provided below:</p>
  
  <pre><code> onInputChange(event, backspace) {
      let newVal = event.replace(/\D/g, '');
      if (newVal.length === 0) {
        newVal = '';
      } else if (newVal.length &lt;= 3) {
        newVal = newVal.replace(/^(\d{0,3})/, '$1');
      // } else if (newVal.length &lt;= 4) {
      //   newVal = newVal.replace(/^(\d{0,1})(\d{0,3})/, '$1,$2');
      } else {
        newVal = newVal.substring(0, 4);
        newVal = newVal.replace(/^(\d{0,1})(\d{1,3})/, '$1,$2');
      }
      this.ngControl.valueAccessor.writeValue("$"+ newVal);
      // console.log(this.toNumber(newVal))
    }
  </code></pre>