AngularJS - Input number with 2 decimal places

My AngularJS - Smart Float Directive post has been a post with a lot of traction, so I want to share another tip related to numbers in Angular.

This a kind of simple tip, but I believe that it can be really useful.

My smart-float directive works really fine in a desktop or laptop browser, but in a smartphone I want to take advantage of HTML5 number inputs and show to my users when they enter in the input, the "mini calculator keyboard".

How to accomplish it using angular?

That's easy.

1. Create the number input with the number type.

<input
  type="number"
  name="myDecimal"
  placeholder="Decimal"
  ng-model="myDecimal"
/>

2. Define the step interval.

<input
  type="number"
  name="myDecimal"
  placeholder="Decimal"
  ng-model="myDecimal"
  *step="0.01"
  *
/>

3. Set the regular expression to validate the input using ng-pattern. Here I want to accept only numbers with a maximum of 2 decimal places and with a dot separator.

<input
  type="number"
  name="myDecimal"
  placeholder="Decimal"
  ng-model="myDecimal"
  ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
  step="0.01"
/>

4. Inform your user if the input has a valid value.

<input
  type="number"
  name="myDecimal"
  placeholder="Decimal"
  ng-model="myDecimal"
  ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
  step="0.01"
/>
<span>Is a valid decimal? </span>

A full example using bootstrap (demo here):

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="myCtrl">
    <form name="myForm" class="form-horizontal">
      <div
        class="form-group"
        ng-class="{'has-error': myForm.myDecimal.$invalid}"
      >
        <label for="inputText3" class="col-sm-2 control-label">Decimal</label>
        <div class="col-sm-10">
          <input
            type="number"
            class="form-control"
            name="myDecimal"
            placeholder="Decimal"
            ng-model="myDecimal"
            ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
            step="0.01"
            required
          />

          <span class="help-block" ng-show="!myForm.myDecimal.$valid">
            Invalid!
          </span>
        </div>
      </div>

      <div class="form-group">
        <label for="inputText3" class="col-sm-2 control-label"
          >The value:</label
        >
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            ng-model="myDecimal"
            disabled
          />
        </div>
      </div>
    </form>
  </div>
</div>

Hope this helps.