title: How to correctly validate number ranges in HTML Input? (Angular 2)
body: <p>In my Angular 2 application I have a component with a <strong>input</strong> field which is supposed to accept a range of numbers.</p>
  
  <p>More specifically, 2 cases:</p>
  
  <ul>
  <li>range 0[0]-23 (hours)</li>
  <li>range O[0]-59 (minutes)</li>
  </ul>
  
  <p>I am using </p>
  
  <pre><code>&lt;form&gt;
      &lt;input type="text" pattern="[0-9]"&gt; &lt;!-- 0-9 --&gt;
      &lt;input type="text" pattern="\d|1\d|2[0-3]"&gt; &lt;!--  0-23 --&gt;
      &lt;input type="text" pattern="\d\d"&gt; &lt;!--  [0-99] --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The issue is that I can basically input anything (<strong>as if validation was ignored</strong>), including text.
  I don't think it's an issue related to <strong>Angular 2</strong> since standard validation works, e.g.</p>
  
  <pre><code> &lt;input type="number"&gt; 
  </code></pre>
  
  <p>allows to input only <strong>numbers</strong> (but <strong>any</strong> number which is not what I want)</p>
  
  <p>I also tried with <strong>min</strong>=0 and <strong>max</strong>=23 (or 59) attributes with type <strong>number</strong> but that doesn't work either.</p>