Develop Reference

A field of Angular template driven forms considered invalid even though the regExp matches

I have this input:
<div class="form-group">
<label for="power">Hero Power</label>
<input [(ngModel)]="model.powerNumber" name="powerNumber" type="text"
class="form-control" pattern="^[0-9]+$"id="powerNumber">
<div [hidden]="powerNumber.valid" class="alert alert-danger">
power must be a number
</div>
</div>
I have added a pattern validator to the input field (only number should pass the test). Below the input I have added an error message that should hidden when the input field is valid. However it shows even when I have entered a value that matches the pattern RegExp. What am I doing wrong?
Here is a Stackblitz demonstration https://stackblitz.com/edit/template-driven-form-demo-wl3apt?file=app%2Fuser-form%2Fuser-form.component.ts

add #powerNumber="ngModel" template reference to input ngModel and all will be working. It is already done with name input in your example

I don't know whether it is eligible for you, however you can use input just for numbers:
<input [(ngModel)]="model.powerNumber" name="powerNumber" type="number"
class="form-control" id="powerNumber">

Angular JS: preserve leading zeros for a number

I want to preserve the leading zeros for a number but as usual it trims them.
I tried
<input type="tel" pattern="[0-9]*">
But this allows text input which breaks my case.
Please help!!!

You can use the input type="text", use the ng-pattern to validate your expressions and then use ng-message to validate your field and display errors.
This won't remove your lead 0s.
So your HTML will look something like this:
<input type="text" ng-pattern="[0-9]*" ng-model="myTel">
<div ng-messages="myForm.myTel.$error">
<div ng-message="pattern">You can insert only digits here</div>
</div>

HTML5 minimum character length validation ignoring spaces and tabs

I am using HTML5 'pattern' attribute with 'required' for validation of input boxes. HTML5's required attribute works but it can accept spaces and tabs which is not good because user will just put spaces then. I need regex such that it will accepts space and tabs but able to count only character's. Example "ronny jones" this should give 10.
In javascript we do it using something like this, I am looking for similar thing in HTML5
var name = document.forms['contact']['name'].value.replace(/ /g,""); // remove whitespace
if(name.length<6){ // count number of character.
document.getElementById('message').innerHTML="Enter correct Name";
return false;
}
I found one related question to this on SO : Is there a minlength validation attribute in HTML5? but it accepts spaces and tabs, which I don't want.
Below is my code with HTML5 pattern,
<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="[A-Za-z]{6,}" title="Name should have atleast 6 characters." required="" />

I managed a silly hack that does what you asked:
<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="\s*(\S\s*){6,}" title="Name should have at least 6 characters." required="" />
There must be 6 non-space characters for this to pass. so "asdfgh", " abc def " will work, but "abc de" fails.
It DOES NOT work for your comment about "there's a space after Anthony" but as Anthony contains 6 characters, then it's fine? If not, can you clarify further in the question.
To explain how it works:
it takes a pattern of "take 1 non-space character" \S followed by "none-or-more space characters" \s*
you need the pattern to be matched 6 or more times (pattern){6,} i.e. (\S\s*){6,}
then allow non-or-more spaces at the front \s*
If you want to limit the characters allowed to Alpha only, change the \S to [A-Za-z].
Yes, it's a hack IMO as it will be hell to parse internally on long strings. But does the job. You might want to mix with maxlength to limit that as well?

<form action="demo.php">
<input id="name" type="text" pattern="^((?:\s*[A-Za-z]\s*){6,})$">
<input type="submit">
</form>
this will work for your case .. its exacly how you want it. i have set limit of character is from 6 to 40..

Angular text form with numbers only?

So I have an input form in Angular here:
<input ng-model="sc.zip" class="form-control" maxlength="5" type="text" />
I don't want type="numbers" because the form needs to be a plain empty textbox. However, I only want the user to be able to type numbers. Either I need to detect when the input is not a digit, or be able to search through the box to find non-digits when submitting.
Either way, I need to validate that the form is digits only. Any help would be appreciated!

use regex
<input name="title" type="text" ng-model="sc.zip" ng-pattern="/^[0-9]*$/" required/>

Matching one or more alphanumeric characters with AngularJS

I have an AngularJS app. Why does the pattern /^[a-zA-Z0-9]+$/ match an empty string?
<form name="addTeamForm" novalidate ng-init="team=''">
<input type="text" name="team" ng-model="team" ng-pattern="/^[a-zA-Z0-9]+$/"/>
</form>
{{ addTeamForm.team.$valid }}
Why the value of $valid is true?
http://jsfiddle.net/NameFILIP/fdsqzf12/5/

You need to also use required or ngRequired:
<input type="text" name="team" ng-model="team"
ng-pattern="/^[a-zA-Z0-9]+$/" required />
The way ngPattern work is to check not empty string to match a pattern. If string is empty it won't be checked and no validation error will arise. By specifying required directive in addition to ngPattern you are making empty string invalid value.
Updated fiddle: http://jsfiddle.net/vittore/fdsqzf12/6/