Control value of input in Aurelia
<p>I need to create an input in Aurelia that only accepts a phone number. If the user types <code>1234567890</code> into this input it should display <code>(123) 456-7890</code> and the bound variable would be set to <code>1234567890</code>. The result should be the same if the user types <code>(123) 456-7890</code> into the input as well. If the user types a letter into the input, the input should not display the letter, nor should the bound javascript variable get updated.</p>

<p>I'm able to partially achieve this using a ValueConverter:</p>

<p><strong>phone.ts</strong></p>

<pre class="lang-js prettyprint-override"><code>export class PhoneValueConverter {
    private removeNonDigits(input) {
        let digits = '';

        // Remove non-digits. i.e. '(', ')', ' ' and '-'
        for (let i = 0; i &lt; input.length; i++) {
            let char = input.charAt(i);

            if ('0' &lt;= char &amp;&amp; char &lt;= '9')
                digits += char;
        }

        return digits;
    }

    toView(value) {
        if (!value)
            return value;

        value = this.removeNonDigits(value);

        let formatted = '(' + value.substring(0, 3);

        if (value.length &gt;= 3)
            formatted += ') ' + value.substring(3, 6);
        if (value.length &gt;= 6) {
            // Don't place an upper limit, otherwise the user would not
            // see the entire value
            formatted += '-' + value.substring(6);
        }

        return formatted;
    }

    fromView(value) {
        let digits = this.removeNonDigits(value);

        // Only accept a 9-digit phone number
        return digits.substring(0, 10);
    }
}
</code></pre>

<p><strong>app.html</strong></p>

<pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  ${PhoneNumber} &lt;br&gt;
  &lt;require from="phone"&gt;&lt;/require&gt;
  &lt;input value.bind="PhoneNumber | phone"&gt;
&lt;/template&gt;
</code></pre>

<p>This works perfectly in forcing <code>PhoneNumber</code> to always be 0-9 numerical digits. If the user types a letter, or a 10th digit, into the input, it will not be added to <code>PhoneNumber</code> - just as expected. But unfortunately, the value of the input (<code>$('input').value()</code>, not <code>value.bind</code>) will still contain the extra, incorrect character.</p>

<p>Is there an Aurelia convention in controlling what characters get added to the value of the input?</p>