AngularJS - Input number with 2 decimal places

AngularJS - Input number with 2 decimal places

by Anam Ansari

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="myCtrl">

      <form name="qsForm">
       <input type="number" class="form-control" name="qsDecimal" placeholder="QS" ng-model="qsDecimal" ng-pattern="/^([0-9]{1,4})?(\.[0-9]{1,4})?$/" required />
       
        <span class="help-block" ng-show="!qsForm.qsDecimal.$valid">
                Invalid!
            </span>
      </form>
      <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,4})?$/" step="0.000001" 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>

JavaScript

function myCtrl($scope) {
  $scope.myDecimal = 0;
}