I have a number input in my HTML and I want it to be an integer, not a floating point number.
So, if I have this:
<input type="number" ng-model="person.age" />
Angular will consider a value of 18.4 to be valid. How can I fix this?
-
1use ng-pattern to this. ng-pattern="/^[0-9]+$/"Hadi– Hadi2016-03-15 11:06:10 +00:00Commented Mar 15, 2016 at 11:06
-
@hadiJZ - seems like a good idea. Can you help me with the exact regex that I need?Yulian– Yulian2016-03-15 11:09:05 +00:00Commented Mar 15, 2016 at 11:09
Add a comment
|
5 Answers
function Main($scope) {
$scope.regex = "/^-?[0-9][^\.]*$/";
}input.ng-dirty.ng-invalid { color: red }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="Main">
<form name="form">
<input type="number" ng-model="person.age" ng-pattern="/^-?[0-9][^\.]*$/"/>
<input type="number" ng-model="person.age1" ng-pattern="{{regex}}" />
</form>
</div>
</div>try this
$scope.regex = "/^-?[0-9][^\.]*$/";
<input type="number" ng-model="person.age" ng-pattern="{{regex}}"/>
5 Comments
Yulian
Yeah, I think it's working pretty well. Thanks, man. I will test it and when I am sure that everything's correct, I will choose your answer as best.
Yulian
It does not allow negative values now.
Yulian
One last thing so far. The regex considers a value like "16." or "0." to be valid. How to exclude the "." (dot) also?
Yulian
I run the code snippet and it's working perfectly, but it's not working the same in my app. In fact, it still allows dots and in doesn't work with a scope variable, only with a regex expression typed directly into the ng-pattern attribute. Maybe this has something to do with the Angular versions. I'm using 1.4.6
Rantiev
With this "0123123123" your "/^-?[0-9][^\.]*$/" won't work. Also you will be able to enter "+" and "." signs
I will share part of my code.
In my .ts file I have the following code:
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
...
export class IntegerComponent implements OnInit {
fgInteger: FormGroup;
...
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.fgInteger = this.formBuilder.group({
amount: ['', [Validators.required, ..., Validators.pattern('^\\d+$')]]
});
}
}
The pattern into the .ts worked for me:
- '^' This is the start of the pattern.
- '\d' This means that the value is a digit (0-9).
- '+' Means that this pattern should be used more than 1 time.
- '$' This is the end of the pattern.
Also, into my .html file, I have the following code:
<form id="fgInteger" [formGroup]="fgInteger" novalidate #fform="ngForm" (ngSubmit)="onSubmit()">
<mat-form-field appearance="outline">
<mat-label>Amount:</mat-label>
<input name="amount" formControlName="amount" type="number" min="1" step="1" matInput placeholder="Enter the amount.">
</mat-form-field>
</form>
By the way I'm working with Angular Material.
You can also use this ng-pattern="/^(0|\-?[1-9][0-9]*)$/".
Comments
This worked for me.
<input type="number" step="1" min="0">
1 Comment
Huantao
the problem of this is that you can still manually enter something like 18.4
Here is another option that works great for me. It doesn't allow the user to enter non integer values, but intercepts the keyboard entries if invalid and prevents the character from being typed.
<input type="number" min="0" oninput="validity.valid||(value='');" maxlength="3" placeholder="Quantity"/>
