0

I have a text field which need to allow only numbers and decimals by user.

And also need to set minimum and maximum value. 

<td ng-class="{ 'has-error' : eForm.marks_{{$index}}.$dirty && eForm.marks_{{$index}}.$error.required }">                                          
    <input type="text" name="marks_{{$index}}" ng-model="data.marks" placeholder="% of Marks" ng-pattern="/^[0-9]+([,.][0-9]+)?$/" class="form-control" ng-disabled="!eEditMode[$index]"  min="1" max="100" ng-required="true">
    <span ng-show="eForm.marks_{{$index}}.$dirty && eForm.marks_{{$index}}.$error.required" class="help-block">Marks is required</span>
</td>
Improve this question

2 Answers 2

Reset to default
2

You can use the number input:

<input type="number" name="input" ng-model="example.value"
           min="0" max="99" required>

For more details: input components in ng / input[number]

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

But it is like dropdown selection but my requirement is : The number need to be entered by the user and that field should accept only number and decimal
Please visit the doc page and take a look at the example at the bottom of the page ! It's not like a dropdown, the user can enter a number and the field accept only numbers
Yes i saw. its like selection menu. But i want a text box which will allow only numbers and decimal values
I'm confused ! what selection menu ? could you please send me a picture ? and what browser are you using ?
You can use the same input type="text" and need to handle the same(integer allowed and min and max value) in the JS file using regular expression otherwise that css you have to change explicitly if you are using the input type="number". IF not the scroll will always appear for number type
|
0

This works for me:

Controller :

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

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

    });

    app.directive("marksRegex", function() {

      var regexp;
      return {
        restrict: "A",
        link: function(scope, elem, attrs) {
          regexp = /^([0-9]([0-9]([\.]([0-9]([0-9]?)?)?)?)?)?$/;
          var char;
          elem.bind("keypress", function(event) {
            if (event.which == 8) return;
            char = String.fromCharCode(event.which);
            if (!regexp.test(elem.val() + char))
              event.preventDefault();
          })
        }
      }

    });

HTML :

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="myApp">
      <div ng-controller="MainCtrl">
        <label>Marks %:</label>
        <input type="text" marks-regex>
      </div>
    </div>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.