How To Validate Textbox Based On Dropdown Value In Angularjs?

In dropdown we have Number and Decimalnumber if user select Number from dropdown text box should allow to enter only number (round number) for example 22,33,444,345436 . it should

Solution 1:

first you change :

<inputtype="number" ng-model="userinput">

to

 <inputtype="text" ng-model="userinput">

then

var app = angular.module('plunker', []);


app.controller('MainCtrl', function($scope) {

  $scope.selectedvalue = "Number";


  $scope.userinput = "";

  $scope.changeFun = function(e) {
    var tempInput = document.querySelector("#inputId").value;
    var regex = new RegExp("^[0-9]+$");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);

    if($scope.selectedvalue === "Number") {
      if ((regex.test(str) || e.which === 8)) {
          returntrue;
      }
      e.preventDefault();
      returnfalse;
    } elseif($scope.selectedvalue === "Decimalnumber") {
      var regex = new RegExp("^[0-9]+$");
      var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
      if ((regex.test(str) || e.which === 8) && tempInput.indexOf(".") === -1) {
        console.log("comming 1111");
          returntrue;
      }


      if(tempInput.indexOf(".") === -1) {
        returntrue;
      }

      if(tempInput.indexOf(".") !== -1 && str !== ".") {
        var lastSubstr = tempInput.substring(tempInput.indexOf("."));
        if (lastSubstr.length < 3) 
        {
            returntrue;
        }
      }


      e.preventDefault();
      returnfalse;
    }

  }
});

see this link : https://plnkr.co/edit/1fvI3grvZUzJCuqwJRXA?p=preview

Solution 2:

add this

<spanng-if="userinput == selectedvalue">
match
</span>

and change

<inputtype="number" ng-model="userinput">

to

<inputtype="text" ng-model="userinput">

expected output

<bodyng-controller="MainCtrl">



 please select
  <selectng-model="selectedvalue"><optionvalue="Number">Number</option><optionvalue="Decimalnumber">Decimalnumber</option></select><br><p>Selected: {{selectedvalue}}</p><inputtype="text"ng-model="userinput"><spanng-if="userinput == selectedvalue">
    match
  </span></body>

Solution 3:

You can make use of ng-pattern to dynamic change rules of an input field.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.inputTypes = [{
     name: "Number",
     regex: "\\d+"  
  },
  {
     name: "Decimal",
     regex: "^\\d*\\.\\d{1,2}$"
  }];
  $scope.selectedregex = $scope.inputTypes[0].regex;
  $scope.userinput = "";
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script><divng-app="plunker"ng-controller="MainCtrl">

  please select
  <selectng-model="selectedregex"><optionng-repeat="type in inputTypes"value="{{type.regex}}">
        {{type.name}}
     </option></select><br><p>Selected regex: {{selectedregex}} </p><formname="form"><inputname="input"ng-pattern="selectedregex"ng-model="userinput" /><br /><spanng-show="!form.input.$valid">Please enter valid input</span></form></div>