I want the following Angular code (using Angular 12) to show "Illegal award number" when the input is invalid.
As you can see in the screenshot, when the number is -1 (smaller than the min value defined on the input), the div is shown as expected.
However, if I input some text such as 1-, or an expression 3-4 and hover my mouse over it, the browser will tell me my input is not a valid number, but the div is not shown (which means awardInputRef.invalid is false).
Why is that?
Here is the relevant code
<label class="form-label" for="awardInput">Award</label>
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
#awardInputRef="ngModel" />
<div *ngIf="awardInputRef.invalid">Illegal award number</div>
PS:
If I add (blur)="onAwardBlur($event)" to the award input and add a function in my component
onAwardBlur(event) {
console.log(event);
}
then debug the code by logevent.target.validity.valid, I will see it is false.
The code is available on stackblitz. The Angular version there is 11, and the div does not show up even if I input -1 there.
As part of Angular version 12 only min and max directive are implemented that's why stackblitz version is not working.
You can workaround your issue using native Input element ValidityState
Define another one template variable on input element
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
#awardInputRef="ngModel" #inputRef />
Then you can add some custom validity something like this:
<div *ngIf="awardInputRef.invalid
|| inputRef.validity.badInput && (awardInputRef.dirty || awardInputRef.touched)
">Illegal award number</div>
Working Example
input: -1
Your Using [ - ] this special character so the filed goes awardInputRef.invalid.
so div shown.
input: 1-
Your using number first it goes awardInputRef.valid or something else but not awardInputRef.invalid .
so the div not shown in this case.
you just inspect the field and find the before after changes .
Related
I have a dynamic input generated with a simple jQuery(...).apend(...) that draw this code on my webpage:
<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="/^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">
I can validate the first part (maximum size of characters including ','), but it gives me an error when y try to validate decimals.
he specified value "111." is not a valid number. The value must match
to the following regular expression:
-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
When I test the regex code on the Chrome console it works (like these examples)
/^(?:\d{0,8})(?:,\d{0,3})?$/.test('1234,12');
/^(?:\d{0,8})(?:,\d{0,3})?$/.test('123,');
but doesn't works inside the input. What could I be doing wrong?
Your regexp does not work because you are trying to match a , on the input. However, even if you see a , on the browser, internally It is stored as . (probably to avoid the sort of problems you are facing now when the browser uses different locales)
So use /^\d{1,8}(?:\.\d{1,3})?$/ for your regex instead.
Here I leave a demo of the code. I have added an alert for every keypress so you can see how It is stored. Try to write 1,1 and see what happens.
<input type="number" name="19000003" min="0" max="99999999" required="" step="0.1"
oninput="alert(this.value); /^\d{1,8}(?:\.\d{1,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1);">
In addition to Julio's answer
note that step="0.1" can also break your form validation.
It's better to adhere to your regex validation (for 3 decimals, step="0.001")
More info here
try to separate function from element
const myElement = document.getElementById("someInput");
myElement.oninput = function(ev) {
/^(?:\d{0,8})(?:,\d{0,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0, -1);
}
<input type="number" id="someInput" name="19000003" min="0" max="99999999" required="" step="0.1" />
I'm trying to understand a way with angular where I can only let the user enter a number that isn't more than 24 or in my other input 60 to represent hours and minutes.
<input type="number"
placeholder="HH"
ng-minlength="2"
ng-maxlength="2"
required
ng-model="session.timeHH">
<input type="number"
placeholder="mm"
ng-minlength="2"
required
ng-maxlength="2"
ng-model="session.timeMM">
This is my HTML at the moment.
The user can enter in the hours input a number like 99 which is obviously going to be wrong. I'm looking for a way to validate or prevent the user before submit to only be able to enter numbers up to 24 for hours and 59 for minutes.
Or even on the click of the submit button would be sufficient.
Not angular, but why not use the HTML attributes? Angular is hip to these and you can check the $valid property of the form to make sure the constraints are satisfied.
<input type="number" min="0" max="24" step="1">
How about just HTML5 since you're already using type="number":
<input type="number" name="hours" min="1" max="24">
Be sure to also validate input on the server side.
If you want to restrict numbers use a dropdown, otherwise you'll have to use native min and max attributes with validation.
Why not make use of the type properties to the inputs as time, this will open a time selector on modern browsers and mobiles
https://plnkr.co/edit/TAwugxjQHcMtJONQJgWA?p=preview
<input type="time"
placeholder="HH:MM"
required
ng-model="session.timeHH">
You can use some angular mask lib that provides masking features.
The ones you could use are, for example, angular-input-masks, ui-mask or ngMask.
Hope someone can point me in the right direction with this.
I have a simple input box:
<form>
<input id="Days" name="Days" type="number" required step="0.025" min="0.000" max="5" value="1.000">
<input type="submit" id="Sub"/>
</form>
Which works OK but the users have requested:
Only allow input in multiples of 0.025
The up and down arrows move in multiples of 1
So it is perfectly acceptable to type in 1.025 but click on the up arrow in the box gives 1 then 2 etc.
I can configure it to meet either requirement but not both at the same time. Is there a way to override the behavior of the arrows achieve this?
Update
The solution provided by frajk below works well but when you click on submit then you get the message:
Anyway round that ?
Assuming you have jQuery available, I think this does what you're looking for
<input id="Days" name="Days" type="number" required step="1.000" min="0.000" max="5" value="1.000">
$("#Days").change(function(e) {
var $ele = $(e.target);
$ele.val( (Math.ceil($ele.val()*40)/40).toFixed(3) );
});
Your code works fine as you want in chrome and firefox.
Arrow up click make value change to 1.025.
I saw this bootstrap popover and I'am trying to use it in my project.
Consider a simple example.
<input type="number" ng-model="data" step="0.1" />
The input field has steps of 0.1. I want the user to enter only values up to 10 and not beyond that.
If user enters anything beyond 10, I want a popover to display at the top stating that the value needs to be entered from the range 0 to 10 only.
How can I achieve this? The popover shown above does not have any example similar to the one I am looking for. Can someone shed some light?
You can adapt the programmatically triggering popups answer (or any of the directives from Good way to dynamically open / close a popover (or tooltip) using angular, based on expression? and tie it to the field validation
<form name="myForm">
<input popover="Should be between 1 and 10" name="myInput" ng-model="test"
popover-toggle="myForm.myInput.$error.max" max="10" type="number"
popover-placement="bottom" />
</form>
I've used the directive from https://stackoverflow.com/a/31372487/360067
Plnkr - http://plnkr.co/edit/2uk4YM5zinM01ayzZKdd?p=preview
I have a number type input that I want to prevent people from entering anything but numbers.
The examples I found work well with input type text fields but don't work well with number fields.
Works well :)
<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')">
Doesn't works well :(
<input type="number" onkeyup="this.value=this.value.replace(/[^\d]/,'')">
Try it for yourself on JSFiddle
Please help...
I've just done some simple testing using JSFiddle and it would appear that if there is an invalid input on an <input type="number" /> element then the this.value property is returned blank.
The following line showed this result when using Chrome:
<input type="number" oninput="alert(this.value)">
JSFiddle Demo
In fact here's the reason why this happens:
The value attribute, if specified and not empty, must have a value
that is a valid floating-point number.
The value sanitization algorithm is as follows: If the value of the
element is not a valid floating-point number, then set it to the empty
string instead.
^ From the HTML5 Draft Paper section on the implementation of the number input type
This problem has taken my interest now and I've come up with a little workaround.
<input type="number" oninput="updateNum(this)">
function updateNum(e)
{
e.select();
e.value = getSelection().toString().replace(/[^\d]/g,'');
}
This has the potential to be buggy if the selection where to change between commands.
JSFiddle for the workaround
See this DEMO if you want to accept numbers with fractional part (3.14 for example)
Number: <input type="number" oninput="updateNum(this)" />
function updateNum(e) {
if (isNaN(e.value)) {
e.value = e.value.replace(/[^\d]/g,'');
}