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 insert new line in input validation tooltip message? When Hover it works fine but i click send it doesnt

How can I add new line in the input tooltip message . I tried <br>, \n,
but it didn't work.
<input type="password" id="password" v-model="user.password" class="form-control"
title="Must contain at least one number, one uppercase letter, one special character and at least 8 characters" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##\$%\^&\*]).{8,}" required>

Hope this helpful to you
Just use the entity code 
 for a linebreak in a title attribute.
Add line break within tooltips
https://jsfiddle.net/cuahms2z/
<form id="myform" >
<input data-html="true" type="password" id="password" v-model="user.password" class="form-control"
title="Must contain at least one number
one uppercase letter 
one special 
 character and at least 8 characters" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##\$%\^&\*]).{8,}" required>
<input type="submit" />
</form>

Update
I have created an issue for this at mdn/mdn https://github.com/mdn/mdn/issues/114
I researched a bit about this and found also 2 other SO Questions one were unanswered and the other had a really bad answer.
setCustomValidity message styles on multiple lines
Create line breaks in oninvalid message
Then I found this article and it helped me to understand the case a bit better and I wrote my own customValidityMessage.
var input = document.getElementById('inp');
input.oninvalid = function(event) {
event.target.setCustomValidity("Must contain at least" + "\n"+ "one" + "\r" + "number one uppercase \n letter,\n one special \n character and at least 8 characters");
}
The MDN Docs said that the parameter for .setCustomValidity() is a DOM String and a DOM String corresponding to JS String
A DOMString is a sequence of 16-bit unsigned integers, typically
interpreted as UTF-16 code units. This corresponds exactly to the
JavaScript primitive String type. When a DOMString is provided to
JavaScript, it maps directly to the corresponding String.
so I thought it should be easy possible to insert inside the string '\n' or '\n'. So I tried as you can see in the example below and it is interpreted but inside the message there is still no line break.
var input = document.getElementById('inp');
input.oninvalid = function(event) {
event.target.setCustomValidity("Must contain at least " + String.fromCharCode(13) + " one " + String.fromCharCode(67) + " number one uppercase \n letter,\n one special \n character and at least 8 characters");
}
<form id="myform">
<input id="inp" data-html="true" type="password" id="password" v-model="user.password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##\$%\^&\*]).{8,}" required>
<input type="submit" />
</form>
I didn't found a solution for this sadly but I thought my attempts can be helpful to solve this isssue so I decided to write it here as a summary of my perceptions.

Putting enter makes lines change.
<input type="password" id="password" v-model="user.password" class="form-control"
title=" · Must contain at least one number,
· one uppercase letter,
· one special character and
· at least 8 characters" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##\$%\^&\*]).{8,}" required>

Using the Pattern Attribute in HTML5

I have a form in HTML5 and I want to add validation elements to the name, address and phone fields. So far I have the following code:
name='name' pattern='(-.''[A-Za-z])'
name='phone' pattern='[0-9+()x-' ']'
name='address' pattern='[0-9A-Za-z][.,#/\:;''&*]'
For the name, I need it to be able to accept the -'. symbols.
For the phone, I need it to be able to accept +()0-9 x and space.
For address, I need it to be able to accept all of the characters I've put there.
I'm not sure I've done it right though, as when testing I don't get error messages.

You need to enclose the pattern in " as you are also using ' within your pattern itself.
Sample for the name field, including the correct pattern string:
<form>
<input type="text" name="name" required pattern="[-.'A-Za-z]+" /><input type="submit">
</form>
(assuming you want to allow -'. plus the characters, your requirements are not 100% clear to me)

Phone Number Validation Angularjs

I am having a issue validating phone number. The phone number is a 10 digit string that should be populated in a three input field
1st input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
2nd input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
3rd input field - have only 4 digits only ( requires, can accept only numbers and max length 4)
and tab should be moved to next input field, when maximum number of characters have been implemented in the first one
the fields should be red, when none of the above conditions are not meeting
<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="phoneone" type="number" required name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonetwo" aria-label="Enter second 3 digits of your phone no."><input id="phonetwo" type="number" required name="phonetwo" class="phone-text-box" ng-model="user.phoneNumbercodetwo" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonethree" aria-label="Enter last 4 digits of your phone no."><input id="phonethree" type="number" required name="phonethree" class="phone-text-box" ng-model="user.phoneNumbercodethree" ng-minlength="4" ng-maxlength="4" maxlength="4" ng-pattern="/^[0-9]*$/"></input></label>
<div class="clearfix" ></div>
how would i achieve the above validation conditions using input html tag

You should use input pattern validation. This can be done using the ng-pattern directive:
NgPattern sets pattern validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$').
Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.

There are a couple of small issues with your code. Specifically I am looking at ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/". You can achieve your number validation using the html5 properties of min and max on your input. So your input would look something like this:
<input id="phoneone" type="number" name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" min="100" max="999" />
And then you can run validations against that using something like this:
<div ng-show="phoneForm.phoneone.$invalid && phoneForm.phoneone.$dirty">
<div ng-show="phoneForm.phoneone.$error.minlength || phoneForm.phoneone.$error.maxlength">This must be a 3 digit number</div>
</div>
Of course exchanging out phoneForm for the name of your form.

ng-pattern is not working for number input

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