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/
Related
Field should be formatted for SSN.
9 numerical digits only + 2 dashes (XXX-XX-XXXX)
<div class="col-md-6" data-number="0" id="amdCorrSSNcont">
<label for="correctSSN">Correct SSN</label>
<input type="text" placeholder="XXX-XX-XXXX" class="form-control" id="correctSSN">
</div>
How can I format the field ?
Using RegEx is probably the best way. Make sure field max-length is correct, and use the pattern match for ###-##-####
^([0-9]{3}[-]{1}[0-9]{2}[-]{1}[0-9]{4})
A useful tool for creating Regex Patterns is https://regexr.com/
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">
I am trying to send validation rules as string from the controller to input element. The string is sent correctly but it is not rendered correctly (you can see on the snippet below that it separates "Field is required" to "Field" is="" required="").
This is what I get after HTML is rendered:
<input type="text" class="form-control valid" id="Code" name="Code"
value="INDiamnana"
data-rule-required="true"
data-msg-required="Field" is="" required=""
aria-required="true">
In the controller I build the string in a way similiar to this:
stringBuilder.Append("data-rule-required=true");
stringBuilder.AppendLine();
stringBuilder.Append("data-msg-required=Field is required" );
And I specify in my razor:
<input type="text" class="form-control valid"
id="..." name="..."
value="..."
#Model.ValidationRules />
#Model.ValidationRules is a string of the format
"data-rule-required=true data-msg-required=Field is required"
Does anyone know how to explicitly say that I want my string non-separable?
Or maybe I am doing it all wrong and I should send the string in different way ?
The problem is because the HTML attribute value has spaces, which is invalid. The first word, Field, is interpreted as the value, whereas is and required are interpreted as other attributes. Hence ="" is added after them by the browser.
To solve this you need to wrap the attribute values in double quotes:
stringBuilder.Append("data-rule-required=\"true\"");
stringBuilder.Append("data-msg-required=\"Field is required\"");
Also note that your use of AppendLine() in the stringBuilder is redundant. HTML doesn't care about whitespace. All it does is make your code more verbose.
I use a regular expression to validate some form inputs with angularjs. I use the ng-pattern for that.
<input type="text" ng-pattern="/^([A-z]){3}$/">
<button type="submit" ng-disabled="demoForm.$invalid">Ok</button>
If i type anything not matching the expression it is not valid (as expected). If i type what is matching the pattern it will be valid (as expected).
But it doesn't work as expected at all. If i type nothing (empty text input) the form is valid, and that is what i want to avoid: It shouldn't be valid.
Any suggestions?
You'll need to give the input an ng-model attribute for Angular form validation to recognize it. You may also want to give the input a name attribute for more control. See Angular Input documentation.
This example should demonstrate how ng-model and name can be used for form validation. Note that I've also adjusted your regex and made the input required.
var myApp = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="demoForm">
<input type="text"
ng-model="myValue"
name="myInput"
ng-pattern="/^[A-Za-z]{3}$/"
required />
<button type="submit" ng-disabled="demoForm.$invalid">Ok</button>
<div>Input valid? {{demoForm.myInput.$valid}}</div>
<div>Form valid? {{demoForm.$valid}}</div>
<div>Model value: {{myValue}}</div>
</form>
</div>
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/>