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>
Related
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'm creating an optional part of a form. Once one of the two elements is selected (or text has been entered) the other is required but if there is no input for both these fields are not required. Can I accomplish this with ng-required? If not is there another way? Thanks for the help in advance!
Example Form
You can just do a ng-required with the other model as parameter:
<input ng-model="myFirstInput" />
<input ng-model="mySecondInput"
ng-required="myFirstInput" />
If the first input is filled in, myFirstInput will evaluate to truthy, so the second input will be required.
See this jsfiddle
you can use ng-required directive
<form name="myForm">
Click here to make the input field required:
<input type="checkbox" ng-model="myVar"><br><br>
<input name="myInput" ng-model="myInput" ng-required="myVar">
<h1 ng-if="!myForm.myInput.$valid">The input field cannot be empty</h1>
</form>
I am new to Angular, and try to use ng-messages to do something like form-validate. Now, I have no problem when I use ng-message in the following situation:
<form name='loginForm' novalidate>
<input name='user' required>
<div ng-messages=loginForm.user.$error>
<div ng-message='required'> this field is required...</div>
</div>
<form>
but when I change name attribute of input,<input name='user[name]' required>, ng-message would not work again. Is there anyone can help me?
Form name attributes CAN be populated dynamically.
Remember, name attribute reads a string, and ng-messages reads an angular expression that should be evaluated to a reference to the $error object.
Since this reference is obtained through an angular expression, it can even be a method that returns the reference.
In your case, assuming your name attribute looks like this:
<form name="loginForm">
<input name="{{ user.name }}" required />
</form>
The correct syntax should be:
<div ng-messages="loginForm[user.name].$error" ></ div>
I really struggling with this. I need to force the user to write the first and last name, in only one textbox.
I using AngularJS, and I want to validate text field using ng-pattern. The field should accept all characters, and require 2 words.
This is input:
<input name="fistname_lastname" ng-model="fistname_lastname" ng-pattern='my_pattern' type="text">
I have the my pattern in the controller, like this:
$scope.my_pattern = /^\s*\w*\s*$/;
Is there another better way do it.
Yes, you can do it by directive too, but just for validating just text contains two characters or not ng-pattern would be better way to do.
Here your html would be using (.*?[a-zA-Z]){2,} this pattern.
HTML
<input type="text" ng-model="fistname_lastname" max-length="30"
ng-pattern="/^(.*?[a-zA-Z]){2,}$/" placeholder="add new todo here"/>
Working Fiddle
Update
If you want to stop your form from submitting,, then you need to no worry about it. Angular internally manages this for you. Whenever you mention ng-pattern against any form field, angular creates object for that field (field should have name and ng-model attribute), that object is responsible for the validity of particular field. As as ng-pattern regx doesn't gets satisfied, angular make that field as invalid, means it append ng-invalid-pattern & ng-invalid class. Resultant the form also gets invalid. and now if you can look at form object you will find that form gets invalid by using syntax form.$valid on html.
HTML
<form name="form" ng-submit="submit()">
<input type="text" ng-model="firstname_lastname" size="30" ng-pattern="/^(.*?[a-zA-Z]){2,}$/" placeholder="add new todo here"/>
<button type="submit">Submit</button>
</form>
Controller
$scope.submit = function(){
if($scope.form.$invalid) //here you can stop use from submitting for by checking validity
alert('Form is invalid'); //form is invalid
else
alert('Form is valid');//here you can do actual submit to server
}
Updated Fiddle
Hopefully this could help you, Thanks.
Thanks, for all your help. But what really worked was this regular expression.
\b([A-Z]{1}[a-z]{1,30}[- ]{0,1}|[A-Z]{1}[- \']{1}[A-Z]{0,1}
[a-z]{1,30}[- ]{0,1}|[a-z]{1,2}[ -\']{1}[A-Z]{1}[a-z]{1,30}){2,5}
I am trying to use Pattern attribute to do validation on text box.
When ever user entered any of these .....i want to show some validation message.
So i created that element as follows:
<input type="text" pattern="/(<!|&#|<\?|<|>)/" title="Required" required />
When ever i entered any text it is showing the alert...
How to get rid of this?
You were using the wrong pattern. In HTML patterns, you don't need an opening and closing delimiter. Also, the browser checks, if the entered text MATCHES the pattern, but you would need the exact opposite (if I understood it correctly). Try something like this:
<form>
<input type="text" pattern="^((?!(<)|(<!)|(<\?)|(&#)|(>)).)*$" title="Required" required />
<input type="submit" />
</form>