I want to show error message when user enter invalid input in text field.
Right now I am using:
Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" name="pin" ng-model="pin" required placeholder="Pin"/>
<span style="color:red" ng-show="myForm.pin.$invalid">Only number are allowed</span>
<input type="Submit" class="form-control btn btn-success" ng-disabled="myForm.$invalid" value="Submit" />
Controller:
<script>
angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
{
$scope.numOnlyRegex = /^\d+$/;
});
</script>
But the above way I am trying shows a static message below the input text-field. What I want is when the user enters letters instead of numbers it should show error message like "only numbers are allowed" else there it should not show any error message.
ng-show method shows static message when the input is empty but I want to show error only when there is error(more realistic way)
You may use the $error.pattern on your form to display specific error message
<span style="color:red" ng-show="myForm.pin.$error.pattern">Invalid Input</span>
Following are some other examples of $error
myForm.useremail.$error.email ==true
// When useremail field does not contain a real email.
myForm.username.$error.require ==true
// Only if the username field is left blank.
Here's the plunkr
Angular allows you to target specific errors. In this case you can use the invalid pattern error:
<span style="color:red" ng-show="myForm.pin.$error.pattern">Only number are allowed</span>
This way it will only show when the error is on the pattern validation.
See this JSFIDDLE
angular.module('myApp',[]).controller('myFormController',['$scope',function($scope){
$scope.myInputVal='';
}])
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="myApp">
<div ng-controller="myFormController">
<form name="myForm" >
<input type="text" ng-model="myInputVal" ng-pattern="/^[0-9]*$/" name="myInputVal"/>
<span ng-show="myForm.myInputVal.$error.pattern">Only Numbers are allowed</span>
<span ng-show="!myForm.myInputVal.$error.pattern">{{myInputVal}}</span>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
</div>
</body>
Related
I've been through all of similar/relative topics on ng-maxlength on StackOverflow, but still could not find an answer. My problem is the following snippet of code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
The error message, which should be displayed only if the input is invalid, is constantly shown! Any advise on what it the reason for that and how could I get rid of it would be highly appreciated!
All angularjs applications must have a root element in order to allow angularjs to be able to effective on your view. And that is ng-app directive. This directive is to auto-bootstrap an AngularJS application
You must add it somewhere to the root element
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block" ng-app="">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
Read more about it here
When I open a modal dialog and without making a change, I click on cancel button, I expect the dialog to close.
But in case I have a validation on the textbox currently in focus, the validation text still appears when the focus moves out of the text box. The mentioned behavior can be seen in the following plunker -
https://plnkr.co/edit/5VsL59iCh7smS1wfEwFZ
<input type="text" autofocus ng-model="$ctrl.textValue" ng-blur="$ctrl.validate()">
Also, as reproducible in the above link, if I click on the cancel button near the top of the button, the click never completes (though the focus is shifted to the button) and the modal dialog does not close.
Any suggestion on how I can make sure that the click on the button completes or if the blur event can be avoided in case the dialog is being cancelled.
You can call $ctrl.validate() inside $ctrl.ok() function. So ng-blur can also be removed.
$ctrl.ok = function () {
$ctrl.validate ();
if(!$ctrl.textValue) {
$ctrl.invalidControl = true;
}
else
$uibModalInstance.close($ctrl.selected.item);
};
Hope it helps :)
Working Plunker: https://plnkr.co/edit/70vdDsbFrSehaHR9TXNp?p=preview
The below code snippet demonstrates how form validation can be done. So since you have many fields you can validate each field with your desired validations.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe#gmail.com';
});
</script>
</body>
</html>
Move the validate function into the $ctrl.ok() and remove it form the view.
$ctrl.ok = function () {
if(!$ctrl.validate())
$uibModalInstance.close($ctrl.selected.item);
else
return
};
Here it is the working example: link
i have a small angular validation where i want an error to show if a textfield is dirty and another error if it is required.
my html:
<form name="someform1" controller="validateCtrl" novalidate>
<input ng-model="namefld" type="text" required/>
<span ng-show="someform1.namefld.$dirty">pls enter name field</span>
<span ng-show="someform1.namefld.$error.required">Username is required.</span>
</form>
i have set the controller like this:
var myapp = angular.module("myApp",[]);
app.controller('validateCtrl', function($scope) {
$scope.namefld = 'John Doe';
$scope.email = 'john.doe#gmail.com';
});
"myApp" is defined in the <html> tag so that is not the problem. I am missing something and am new to angular, pls guide what i am doing wrong.
You need to add a name to the input too. As you have it set up now $dirty will only work on the form itself not on each individual input, you need to add a name to the inputs for that
Working Demo
You are missing name='namefld'
<input ng-model="namefld" name='namefld' type="text" required/>
Angular form validation works based on the name of the form and the form inputs. In your case you have specified the name of the form but not the input element. Add the name="namefld" to the input element and it will work.
<form name="someform1" novalidate>
<input ng-model="namefld" name="namefld" type="text" required/>
<span ng-show="someform1.namefld.$dirty">pls enter name field</span>
<span ng-show="someform1.namefld.$error.required">Username is required.</span>
</form>
See a working JSbin for same, that I have created
I'm creating a modal dialog and trying to read the fields back when the dialog is closed, but when the input is edited, the ng-model for the input field is being set to undefined. With the Plunk, if you click the dialog button and then press Ok without modifying the text field, it will display "blah". But if you modify the text input at all, then nothing will be displayed.
The dialog template is:
<script type="text/ng-template" id="simpleModal.html">
<div class="modal-header">
<h3 class="modal-title">Simple Modal</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="emailInput">Email</label>
<input id="emailInput" type="email" class="form-control" ng-model="user.email">
</div>
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="ok()">Ok</button>
</div>
</script>
And the controller for the modal dialog:
app.controller('SimpleModalController', function($scope, $uibModalInstance, $log) {
$scope.user = {
email: "blah"
};
$scope.ok = function() {
$log.debug('simpleModal ok called ' + $scope.user.email);
$uibModalInstance.close($scope.user.email);
};
});
I've seen reference to https://stackoverflow.com/a/22768720/552936, but I've changed my code to reflect this and it hasn't fixed the issue.
You have declared input type="email" in your input field in modal
<input id="emailInput" type="email" class="form-control" ng-model="user.email">
It'll pass value if data according to email . like a#b.com
You can check if data has valid email
HTML
<form name="myForm">
<input type="email" name="myEmail" model="myEmail" />
<span>Valid Email {{myForm.myInput.$valid}}
</form>
PLUNKR
If you wanna pass any string then you have to make it type="text".
The reason it's being set to undefined is because you have the input for the email address as type=email. If you put anything but a valid email address in that field user.email will be set to undefined.
I just ran your plunker and put in a valid email address and can see it's has been set correctly. This is an instance where you should be validating that it's a well formed email address before allowing submission.
I've this AngularJS HTML using Bootstrap:
<div class="col-sm-6" ng-app ng-controller="MyController">
<br/><br/>
<form name="myForm">
<div class="input-group">
<input type="text" name="input" class="form-control" ng-model="input" maxlength="{{inputMaxLength}}" ng-minlength="{{inputMaxLength}}" ng-maxlength="{{inputMaxLength}}" placeholder="Type input.." aria-describedby="basic-addon2" required />
<span class="input-group-addon" id="basic-addon2" ng-bind="{{inputMaxLength-input.length}}"></span>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default btn-primary" ng-disabled="myForm.$invalid">Submit</button>
</div>
</form>
</div>
and this controller:
function MyController($scope) {
$scope.input = "";
$scope.inputMaxLength = 18;
}
The Bootstrap addon in the field, should always count the remaining characters. The Submit button should be disabled as long the form is not valid.
The button works as aspected, but the "count down" in the add on is always 18.
Why?
See this JSFiddle.
You have a typo in ng-min-length, you should have:
ng-minlength="{{inputMinLength}}"
instead of
ng-minlength="{{inputMaxLength}}"
Oh and you should lose the curly braces on ng-bind, you can use one or the other but not both
So either:
<span class="input-group-addon" id="basic-addon2" ng-bind="inputMaxLength-input.length"></span>
or
<span class="input-group-addon" id="basic-addon2">{{inputMaxLength-input.length}}</span>
(same applies for ng-minlength="{{inputMaxLength}}" ng-maxlength="{{inputMaxLength}}", no need for interpolation here, use ng-minlength="inputMaxLength" ng-maxlength="inputMaxLength" instead)
Note that while the input does not fulfill the requirements ie. larger than minLength and shorter than maxLength input will not have a value.
In this case you can get the value using myForm.input.$viewValue
I have updated you fiddle http://jsfiddle.net/29m5tdsc/9/
This can't work : your ng-validation (ng-minlength) will set $scope.input to null. So your counter wont work.
Besides, you wrote :
ng-bind="{{inputMaxLength - input.length}}"
When angular will work he will replace variables with values. You should wrote :
ng-bind="(inputMaxLength - input.length)"
JS Fiddle