How can i validate decimal point for input number field?

Question

Have list of currency with decimal point and have Two input fields 1st one is currency and 2nd will be amount

based on currency selection amount decimal point should be enter

for example case 1:

user select USD Currency amount should be 2 decimal point.

if user enter more than 2decimalpoint need show error message to user

case 2: user select AUD Currency amount should be 5 decimal point. if user enter more than 5 decimal point need show error message to user

Validation should be dynamic based on currency we need to check decimal points

This time we need to show error message(look at amount field it has 3 decimal points)

demo

<div ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="MyApp">
   <form name="service" novalidate ng-submit="save(service)">
      <md-input-container class="md-block" flex-gt-xs>
      <label>Currency</label>
      <md-select ng-model="service.Currency" required name="Currency" >
         <md-option ng-repeat="currency in listofcurrency" value="{{currency.Currency}}">{{currency.Currency}}</md-option>
      </md-select>
      <div ng-messages="service.Currency.$error">
         <div ng-message="required">Currency is required.</div>
      </div>
      <md-input-container class="md-block" flex-gt-xs>
         <label>Amount</label>
         <input ng-model="service.amount" type="number" step="0.01" min="0.01" required name="Amount">
         <div ng-messages="service.Amount.$error">
            <div ng-message="required">Amount is required</div>
            <div ng-message="min">Amount must be greater than 0.</div>
         </div>
      </md-input-container>
      <md-button class="md-raised" aria-label="Save" type="submit">
         Submit
      </md-button>
   </form>
</div>

angular
  .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('DemoCtrl', function($scope) {

  $scope.listofcurrency =
[
{
"Currency":"USD",
"DecimalDigit":2
},
{
"Currency":"AUD",
"DecimalDigit":5,
},
{
"Currency":"JPY",
"DecimalDigit":0,
}]
  })
  .config(function($mdThemingProvider) {

    // Configure a dark theme with primary foreground yellow

    $mdThemingProvider.theme('docs-dark', 'default')
      .primaryPalette('yellow')
      .dark();

  });

Answer 1

@realme Try This:

<div ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="MyApp">
   <form name="service" novalidate ng-submit="save(service)">
  <md-input-container class="md-block" flex-gt-xs>
  <label>Currency</label>
  <md-select ng-model="service.Currency" required name="Currency" ng-change="formatPattern(service.Currency)">
     <md-option ng-repeat="currency in listofcurrency" value="{{currency.Currency}}">{{currency.Currency}}</md-option>
  </md-select>
  <div ng-messages="service.Currency.$error">
     <div ng-message="required">Currency is required.</div>
  </div>
  <md-input-container class="md-block" flex-gt-xs>
     <label>Amount</label>
     <input ng-model="service.amount" type="number" step="0.01" min="0.01" pattern="{{pattern}}" required name="Amount">
     <div ng-messages="service.Amount.$error">
        <div ng-message="required">Amount is required</div>
        <div ng-message="min">Amount must be greater than 0.</div>
        <div ng-message="pattern">Amount must be greater than 0.</div>
     </div>
  </md-input-container>
  <md-button class="md-raised" aria-label="Save" type="submit">
     Submit
  </md-button>
 </form>
</div>

angular
  .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('DemoCtrl', function($scope) {

  $scope.listofcurrency =
[
{
"Currency":"USD",
"DecimalDigit":2
},
{
"Currency":"AUD",
"DecimalDigit":5,
},
{
"Currency":"JPY",
"DecimalDigit":0,
}]

$scope.pattern = "";
$scope.formatPattern = function(currency) {
    for (var val of $scope.listofcurrency) {
        if (val.Currency === currency) {
            $scope.pattern = "^\d+(\.\d{1,"+(val.DecimalDigit)+"})?$"
            break;
        }
    }
}
})
.config(function($mdThemingProvider) {

// Configure a dark theme with primary foreground yellow

$mdThemingProvider.theme('docs-dark', 'default')
  .primaryPalette('yellow')
  .dark();

});

Answer 2

You can use Regex to test decimal points. Example:

function checkDecimal(currency, amount) {
  switch (currency) {
    case "USD":
      var regexp = /^\d+(\.\d{1,2})?$/;
      return regexp.test(amount);
    case "AUD":
      var regexp = /^\d+(\.\d{1,5})?$/;
      return regexp.test(amount);
  }
}

The \d{1,2} in regex defines how many digits there should be (in this case it's 1-2 digits).