title: Input number with 2 decimal places and max length of 12
body: <p>I have an input of type number, the value in this input will be saved in a column of type number(12,2), so I want to set the max length to 12 (12 digits in total,
  2 of which are after the decimal point).</p>
  <p>I tried as following :</p>
  <pre><code>&lt;input type=&quot;number&quot; md-maxlength=&quot;12&quot; ng-pattern=&quot;/^[0-9]{0,10}([,.][0-9]{0,2})?$/&quot; step=&quot;0.01&quot; ..&gt;
  </code></pre>
  <p>Whenver I type something it's invalid, this only occurs when I add the <code>md-maxlength=&quot;12&quot;</code> which I use to display the max length under the input field.</p>
  <p><a href="https://i.stack.imgur.com/lyL3R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lyL3R.png" alt="enter image description here" /></a></p>
  <p>As you can see in the picture the input is invalid.</p>
  <p>How can I solve this ?</p>
  <h1>Edit:</h1>
  <p><code>ng-maxlength</code> instead of <code>md-maxlength</code> resolves this issue but the x/12 label under the input which indicates the max length is not displayed anymore.</p>
  <h1>Edit 2:</h1>
  <p>The regex now indicates that only 10 number are allowed before decimal point (comma or dot) and 2 are optional after, you can see that the regex is working just fine here : <a href="https://regex101.com/r/fdDLFP/3" rel="nofollow noreferrer">https://regex101.com/r/fdDLFP/3</a>, the problem is when I add the <code>md-maxlength</code>.</p>