We Keep Coding

reactive forms pattern IE11

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)

how to allow input type number to accept alphabet

I want to enter full width number and turn it into half width using jquery but first I need it to accept characters that are not number.
<input id="text1" step="0.5" type="number" value="" name="text1">
I need type number because I want the step feature.

You can't make a type="number" field accept non-numeric characters. If you want to do that, you'll need to use type="text". (If you need the step feature, you'll have to implement it.)

If you want your text filed to accept floating numbers. Use following Input.
<input type="number" step="any" name="text1" value="">

How to only allow the numbers 0-5 in <input> fields with AngularJS?

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

trigger number pad on focus in html input element

I'm working on a web application for tablets. In the application there is an input element that requires an integer input. When the user clicks on the input element usually the letter keyboard pops up and then the user has to switch to the number pad. Is there an attribute that one can specify so that the tablet pops up a number pad instead?

Did you try number type:
<input type="number" name="quantity" min="0" max="1000" step="1">

One of these types:
<input type="tel" ...>
<input type="number" ...>
The actual behaviour will depend on the tablet's platform. On iOS, the number keyboard has integers and arithmetic operators, and the tel keyboard has large digits and a #/* key only.
Source

You can try <input type="number" />.
And if you want to remove arrows you can check : this answer

Mobile Safari - How to Default to Full Numeric Keypad for Decimal Entry w/o type="number", or disable Safari input type="number" correction

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.