Restrict input type number
<p>I'm having trouble to restrict an input type number to positive number only. As stated in that post : <a href="https://stackoverflow.com/questions/8808590/html5-number-input-type-that-takes-only-integers">HTML5: number input type that takes only integers?</a> I am <strong>not</strong> looking for the step="1" answer since it allows the user to type {e.,} as well.</p>

<p>I am using a directive I found on a related post (<a href="https://stackoverflow.com/questions/14615236/how-do-i-restrict-an-input-to-only-accept-numbers">How do I restrict an input to only accept numbers?</a>) to which I just added a few console log and a toString() : </p>

<p>It's working fine when the input type is a text, however it's never called when the input type is number and I type either 'e' ',' or '.'.</p>

<p>Any idea on what I am missing here ? I want to use the input type=number to enable the arrow to select a value using angular material.</p>

<pre class="lang-js prettyprint-override"><code>function restrictInput($mdDialog) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      function inputValue(value) {
        console.log("hello ! :", value)
        var val = value.toString();
        console.log("goodbye ! : ", val)
        if (val) {
          var digits = val.replace(/[^0-9]/g, '');
          console.log("digits :", digits)
          console.log("val : ", val)
          if (digits !== val) {
            ctrl.$setViewValue(digits);
            ctrl.$render();
          }
          return parseInt(digits, 10);
        }
        return undefined;
      }
      ctrl.$parsers.push(inputValue);
    }
  };
}
</code></pre>



<p>Html is something like this : </p>

<pre class="lang-html prettyprint-override"><code>&lt;md-input-container flex class="md-input-has-placeholder"&gt;
  &lt;label&gt;Années d'expérience stage inclus&lt;/label&gt;
    &lt;input
      type="number"
      required
      step="1"
      restrict-input
      min="0"
      name="Expérience stage"
      ng-model="model"&gt;
    &lt;div ng-messages="form['Expérience stage'].$error" md-auto-hide="false"&gt;
      &lt;div ng-message="required"&gt;Requis&lt;/div&gt;
    &lt;/div&gt;
&lt;/md-input-container&gt;
</code></pre>



<p><strong>EDIT</strong></p>

<p>Using getter setter (ng-model-options="{ getterSetter: true }") worked out perfectly here.</p>