Take a look at this jsbin
I have one field that is properly checking the range of the user's input. This is a number field.
I have another field that is changing the input into a currency format. This is a text field.
My issue is that I cannot do both of these ideas on one field. One field needs it to be text while the other requires it to be a number.
Is there something out there that can accomplish the marriage of both fields?
Instead of creating your own directive look into ng-currency: http://ngmodules.org/modules/ng-currency
<input type="text" model="yourModel" ng-currency min="1" max="1337" />
angular.module('myApp', ['ng-currency'])
.controller('CurrencyController', function($scope) {
$scope.myData = 8;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/aguirrel/ng-currency/master/src/ng-currency.js"></script>
<!-- PLEASE CHANGE AS YOU WISH THIS LOCALE JS -->
<script src="https://code.angularjs.org/1.4.3/i18n/angular-locale_es-us.js"></script>
<div ng-app="myApp" ng-controller="CurrencyController">
<input type="text" ng-model="myData" ng-currency min="1" max="10" currency-symbol="$" /><br/>
{{ myData }}
</div>
Related
I have a form which has input fields that is dynamically built using ng-repeat. How I can validate these fields are greater than another input field. Please look at this sample code.
<html ng-app>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-init="weekDays = ['monday', 'tuesday', 'wednesday','thursday', 'friday', 'saturday','sunday']">
<h1>Fun with Fields and ngModel</h1>
<p>days: {{weekDays}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="weekday in weekDays">
Value: {{weekday}}
{{day='day_'+weekday; ""}}
<input name="{{day}}" ng-model="val">
</div>
<div>
Number to validate : <input name="numToValidate">
</div>
</body>
I am very new to angularJS and still learning. However I couldn't able to think through this simple validation. Please help.
Html:
<form name="form">
<div ng-repeat="weekday in weekDays">
Value: {{weekday}}
{{day='day_'+weekday; ""}}
<input name="{{day}}" ng-model="val" required>
</div>
<div>
Number to validate : <input name="numToValidate" required>
</div>
</form>
Script:
if($scope.form.$valid){
// You can write your code here what you want to do after validate.
}
You can use html form element with min attribute to check validity
<input name="{{day}}" ng-model="weekday.val" min="{{numToValidate}}">
you will need seperate model for each of your inputs in your ng-repeat therefore I changed your ng-model with the following
ng-model="weekday.val"
if you do not want to use form you can check the validity of your value with ng-blur directive (triggered when input loses focus).
html
<input name="{{day}}" ng-model="weekday.val" ng-blur="checkValid(weekday.val)">
js
$scope.checkValid = function(value){
if(value > $scope.numToValidate){
alert("please enter a valid number");
}
}
I have an input that should validate only if input length is 11 or 14.
Is there any way of achieve this without create a directive?
There's one more thing:
I'm using a mask that formats the input as this:
(when 11)
000.000.000-00
(when 14)
00.000.000/0000-00
the pattern should ignore '.' and '/'
Thanks.
Try use ng-pattern
/^([0-9]{11}|[0-9]{14})$/
// Code goes here
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl as vm">
<form name="form">
<input type="text" name="name" ng-model="name" ng-pattern="/^([0-9]{11}|[0-9]{14})$/">
<span ng-show="form.name.$error.pattern">Not valid!</span>
</form>
</div>
try this in you tag
ng-pattern="/^[0-9]{1,16}$/" ng-maxlength="16"
Why is AngularJS not checking the step="0.01" attribute of the second input? For min and max attributes it works perfectly, but not for the step attribute.
For example: The input 0,005 will evaluate submitNewEntryForm.submitNewEntryAmount.$valid to true, but it shouldn't.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="">
<form class="form-inline" name="submitNewEntryForm">
<div class="form-group" ng-class="submitNewEntryForm.submitNewEntrySubject.$valid ? 'has-success' : 'has-error'">
<label for="subject">Betreff:</label>
<input type="text" class="form-control" id="subject" required name="submitNewEntrySubject" ng-model="submitNewEntrySubject">
</div>
<div class="form-group" ng-class="submitNewEntryForm.submitNewEntryAmount.$valid ? 'has-success' : 'has-error'">
<label for="amount">Betrag:</label>
<input type="number" class="form-control" id="amount" required name="submitNewEntryAmount" ng-model="submitNewEntryAmount" step="0.01" min="0" max="99999">
</div>
<button type="submit" class="btn btn-primary" ng-disabled="!(submitNewEntryForm.submitNewEntrySubject.$valid && submitNewEntryForm.submitNewEntryAmount.$valid)" ng-click="">Submit</button>
</form>
</div>
Add regex, like \d+\.\d{0,2}
You can use HTML5 pattern="^\d+\.\d{0,2}$" or ng-pattern="^\d+\.\d{0,2}$". It changes error state without limiting html input to 2 decimal points.
To be strict, you should use ^\d{1,5}\.\d{,2}$
If you want number to have 2 decimal point but allow it to be without leading 0 like .01, you can use ^\d*\.\d{2}$
I didn't realize that there was a Angular directive for the step attribute. If you look at the documentation, it seems to be a very recent addition.
I find no mention of the step attribute until you get to a build of the un-released 1.5.9 version.
Latest version: https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D
Notice in the "Usage" and "Arguments" sections that the step directive is listed. Now use the pull down menu in the upper left to change the version, and observe that there is no mention of the step directive.
Either this is a brand new, unreleased feature... or perhaps the documentation for older versions is not correct :)
I have an AngularJS single page application. One view has a textbox that I want to only accept numbers for an integer field. I have entered this code in the controller and this textbox in the view, but when I run the view it accepts any keyboard characters. Can you tell me how I need to modify this to work?
$scope.FilterNumbersOnly = /^\d+$/;
<input ng-model="x.COLUMN_VALUE" ng-pattern="FilterNumbersOnly" />
From the AngularJS documentation, ng-pattern will set the pattern key on the error object when the values input into the text-based field do not pass the specified regex test.
This says nothing about prohibiting users from inputting text. If you would like to add that behavior, you need to listen to the pattern key on the error object and attach handlers to it. When the input is invalid, the error object will reflect this, and you should respond by preventing user input. Or you can take whatever such action you deem necessary.
To prevent user input, you can set the disabled attribute on the input field when the pattern key on the error object is set.
One simple way to accomplish this is with the ng-if directive.
<input disabled ng-if="!form.input.$valid" />
<input ng-if="form.input.$valid" />
Here is a link to a working example.
You can do it using:
ngChange directive;
ngMask module (Always I need handle inputs with masks I use it).
I made this snippet showing both ways:
(function() {
"use strict";
angular.module('app', ['ngMask'])
.controller('mainCtrl', function($scope) {
$scope.checkNumber = function() {
$scope.input = $scope.input.replace(/\D+/, '');
}
})
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngMask/3.1.1/ngMask.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<form name="form" novalidate>
<label for="withoutMask">Input without mask: </label>
<input type="text" id="withoutMask" ng-model="input" ng-change="checkNumber()">
<hr>
<label for="mask">Input with mask: </label>
<input type="text" id="mask" mask="d" repeat="15" restrict="reject" limit="false" ng-model="otherInput">
</form>
</body>
</html>
why not use the built-in HTML support?
<input type="number">
supported - http://caniuse.com/#search=input%20type%3D%22number%22
I'm new to AngularJS and I am going through this link and I am curious to do the experiment on a text box control using ng-bind. But it is not working.
<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<input type ="text" ng-bind="name" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
How can I populate a text box using ng-bind?
As, The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes, you will not be able to bind to an input box:
<input type ="text" ng-bind="name" />
You can instead use ng-value
<input type="text" ng-value="name" />
or you can populate your input box using the model within the value attribute.
<input type="text" value="{{name}}" />
See this codepen