I have this form:
this.form = this.formbuilder.group({
weight: [weight, [Validators.pattern('^(0|[1-9][0-9]*)$')]],
height: [height, [Validators.pattern('^(0|[1-9][0-9]*)$')]]
});
With the following inputs:
<input type="number" placeholder="Indtast din højde i cm" name="height" formControlName="height" class="form-control"/>
<div *ngIf="form.get('height').dirty && form.get('height').invalid" class="error-text">
No Letters
</div>
<input type="number" placeholder="Indtast din vægt i kg" name="weight" formControlName="weight" class="form-control"/>
<div *ngIf="form.get('weight').dirty && form.get('weight').invalid" class="error-text">
No Letters
</div>
This works as intended on chrome however in IE I am able to write both numbers and characters without getting an error message.
Can anyone tell me what I might be missing?
I think the pattern validation actually doesn't work in neither Chrome nor IE. I agree with Petr Averyanov's answer. You can also refer to this thread and this doc. In the doc, it says:
<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
You can change the input type to type="text", then it can work in both IE and Chrome.
Result in IE 11:
Your question is invalid, patterns never worked in number inputs and does not work now (Just checked it in Chrome with input 'e').
You need either change input type to text or allow letters (Actually why not... 1e1 === 10 -- you can add validation for input to be a valid number)
Related
In a <input type="number"> I have to limit the numbers that can be entered to 7. Moreover, on Chrome I am able to input just numbers, but not on Firefox or IE.
<input type="number" id="myInputNumber" name="myInputNumber" [pattern]="myPattern"
[(ngModel)]="myModel" maxlength="7" #fooModel="ngModel">
I know that type number are not supported on Firefox, so there is a function that allows me to reach the goal on all three browsers?
maxlength is ignored on type="number" by design.
You'll have to implement a custom directive.
Here's a tutorial you can follow.
I have an input field like this:
HTML
<input ng-model="newtodo.effort" ng-enter="addTodo()" type="number" min="0" max="5"
maxlength="1" size="1" step="1" class="form-control marginBottom"
placeholder="Aufwand" aria-describedby="basic-addon2" required></input>
JavaScript/Angular controller
$scope.addTodo(todo) {
restservice.addTodo(todo); // Does call to REST service backend
}
In the input field above I only want to allow integer values 0, 1, 2, 3, 4 and 5.
Not allowed are floats (e.g. 1.4), characters (e.g. foo) and values less than 0 or bigger than 5.
The input field may not be empty!
As you can see I am already using HTML5 input attributes for this but I know that I cannot rely on those. Additionally I also check server-side if the values entered are valid against my restrictions. So far so good, but in order to increase usability and responsiveness of my web app I also want to validate these values in JavaScript using AngularJS. How would I do that? I know that I could implement complicated value checks in $scope.addTodo(todo) and then output error messages to the user if the values he/she entered weren't ok but I somehow "feel" that there is a better, easier "angularish" way using RegEx and a 1-liner? If so, please explain to me how to do this the Angular way. Thanks!
You can add the following attribute to your input field.
ng-pattern="/^[0-5]+$/"
And validate as such:
function formCtrl($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<form name="myForm">
<input type="number" ng-model="newtodo.effort" name="effort" ng-pattern="/^[0-5]$/" ng-enter="addTodo()" step="1" class="form-control marginBottom" placeholder="Aufwand" aria-describedby="basic-addon2" required>
<span ng-show="myForm.effort.$error.pattern">The number must be between 0-5</span>
<span ng-show="myForm.effort.$error.number">No characters allowed</span>
<span ng-show="myForm.effort.$error.required && !myForm.effort.$error.number">The field is required</span>
</form>
</div>
You can use ngPattern to set the regular expression which you want to validate against.
Reffer to the docs for more details: https://docs.angularjs.org/api/ng/directive/input
I have a form that's being validated by parsley, but parsley seems to be screwing up. The element in question is defined like this:
<input class="num-selector" type="tel" name="gift_amount" data-min="20" data-type="digits" required>
However, stepping through the debugger reveals it's being validated as data-type="phone", which causes validation to fail. (Unless somebody is buying a gift certificate worth over a billion dollars, but that's clearly a fringe condition.)
Has anybody heard of anything like this -- parsley screwing-up the data-type? Ever run into code that picks a fight with parsely.js and corrupts its data like this?
The problem is because you use type="tel" in your input and parsley automatically recognizes it as phone number, not digits. Should be:
type="number"
Or just text.
Also there is no such attribute as data-type, you should use data-parsley-type="digits" instead. Same with data-min should be just min or data-parsley-min="20"
So your code can be:
<input class="num-selector" type="text" name="gift_amount" data-parsley-min="20" data-parsley-type="digits" required>
Look at the Validators list on official documentation.
I am trying to implement input number field which will allow positive or negative numbers.
I have used "/^0|[1-9]\d*$/" regex expression for ng-pattern.
But it is not working.For character input it is not showing any error.
I have pasted my code here.
Update
I don't want to make this field as required.I just want only number validation(charters are not allowed).
There are a couple of problems with your code:
The pattern /^0|...$/ is interpreted as /(^0)|(...$)/. So, your pattern will accept any string that either begins with 0 (no matter what follows) or ends with any digit in [1-9] (optionally followed by any number of digits).
The correct pattern is: /^(0|[1-9][0-9]*)$/ (note that \d will match more characters than [0-9], e.g. arabic digit symbols etc).
The input elements of type number are handled in the following way by the browser:
If their content is not a valid number, then their value property is set to ''.
Thus, entering 1w3 will cause the value to be an empty string, so then pattern will not be applied.
You should use an input element of type text.
(This is not directly related to your question, but I noticed in your fiddle, you were using <form>.<input>.$invalid, instead of the (probably) intended <form>.<input>.$valid.
$invalid is a property of the FormController only.)
Based on the above, your code should look more like this:
<input type="text" name="price_field" ng-model="price"
ng-pattern="/^(0|[1-9][0-9]*)$/" />
(For accepting negative numbers as well, change ng-pattern to /^(0|\-?[1-9][0-9]*)$/.)
See, also, this short demo.
(UPDATE: The demo has been updated to illustrate the differences between number- and text-fields and between different patterns.)
Why do not use required with min. So we can write:
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number"
ng-model="price"
ng-init="price=0"
name="price_field"
min="0"
required
>
<span ng-show="myForm.price_field.$error.required ||
myForm.price_field.$error.min">Not a valid number!</span>
<input type="submit" value="submit" />
</form>
</div>
Demo Fiddle
Howevewr if you still want to use pattern, remove type="number". I'm not sure but sounds like type number has own pattern, this is a reason why it doesn't work.
Here is 2nd Demo Fiddle
used htm5 pattern for input number only
<input type="number" name="country_code" pattern="[0-9]" >
http://www.w3schools.com/tags/att_input_pattern.asp
I have a fairly basic but frustrating problem, essentially I've been trying to force input fields to behave more like text input types (where they do not correct incorrect number entries, such as "0..7" to truncate to "0") and just let JS form validation and backend validation do its job. However, while I want to allow the user to enter whatever they want in the field (input type="text"), I want to FULL numberpad keyboard to display.
Original:
<input type="number" name="test" class="answers" id="mileage" value="0.0" maxlength=5 />
Attempts to fix:
Works on iPad, but NOT on iPods, as iPods display the compact number pad WITHOUT decimal points:
<input type="text" name="test" class="answers" id="mileage" value="0.0" maxlength=5 pattern="\d*"/>
Doesn't work on iPod, as it displays the full text keyboard, but doesn't default to the "number side" of the full keyboard with a decimal:
<input type="text" name="test" class="answers" id="mileage" value="0.0" maxlength=5 pattern="\d+(\.\d*)?"/>
Anyone have any ideas? Either to prevent Mobile Safari from correcting input number types (number types display the correct keyboard on iPods and iPads, but has built in correction on fields when the keyboard hides), or to force the keyboard to be on the Number side of the full iPod keyboard?
FYI:
This sounds very similar to my issue, however I may need a different solution. Sounds like they desired the "Full" numeric keyboard to appear by default but without number autoformatting that Safari does on the field when entering other characters in.
Force a numeric keyboard but allow punctuation: HTML5, mobile Safari
I know this is old but I see this being asked quite a lot.
To prevent validation of the number input type (and other types) you can use the novalidate attribute on the <form> element:
<form novalidate>
<input type="number" name="test" class="answers" id="mileage" value="0.0" maxlength=5>
</form>
You'll still get the numeric keyboard but it won't force the user to enter numbers only.