Menu
I have a simple text input in which I only want to allow floats and ints (watch out: jade)
input.form-control(type="text", ng-model='usd', ng-pattern="nums",ng-change='convert_to_btc()', placeholder="USD")
However it doesn't work, I can always insert any character in the input (do I need to do more in order to display something? e.g. a red border if it's incorrrect? or should then just those characters not even be able to be entered?) The pattern is a regex and thus not a string, so that should be fine???
Here's the controller:
app.controller("AppCtrl", function AppCtrl($scope, $http, $interval ) {
//lots of other stuff
$scope.nums = /^\-?\d+((\.|\,)\d+)?$/; //note no string, it's a regex
}
This is the generated HTML. Could this be the problem? The generated HTML actually has a string, not a regex!?
<input type="text" ng-model="usd" ng-pattern="/^\-?\d+((\.|\,)\d+)?$/" ng-change="convert_to_btc()" placeholder="USD" class="form-control ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-pattern">
814
The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ngModel on input HTML element. It is used to set the pattern validation error key if input field data does not match a RegExp that is found by evaluating the Angular expression specified in the ngpattern attribute value.
The ng-pattern-restrict directive is used to restrict the user input by disabling the invalid characters with the help of Regular Expression patterns in AngularJS. The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Definition and UsageThe ng-change event is triggered at every change in the value. It will not wait until all changes are made, or when the input field loses focus. The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.
Explanation: The MVC, Model view controller is a pattern on which angular is based. MVC is a software design pattern that is used for developing the UI. So the architecture pattern that angular is based on MVC.
I hope this is what you are trying to do.
Please have a look at the below link
http://plnkr.co/edit/BGzLbQHy0ZtHYmom8xA3
<!DOCTYPE html>
<html ng-app="">
<head>
<script data-require="[email protected]" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13">
</script>
<style>
.ng-invalid-pattern {
border:1px solid #f00;
}
</style>
</head>
<body>
<p>Hello</p>
<form name='myform'>
<input type="text" name='ip' ng-model="usd" ng-pattern="/^\-?\d+((\.|\,)\d+)?$/"
ng-change="convert_to_btc()" placeholder="USD"/>
<p ng-show='myform.ip.$invalid'>Error</p>
</form>
</body>
</html>
If you are trying to block the user from being able to enter character/letters and only allowing them to enter numbers into the input, then change the <input type="text" to <input type="number"
Here's a link to the Angular Doc page on inputs that should only allow numbers: input[number]
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
