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
Related
In Angularjs 1 there are many examples of validation on submit OR on user input.
In this project I need to update the validation messages on user clicks submit button only, i.e, the USER INPUT WILL NOT UPDATE THE VALIDATION MESSAGES (client spec).
Example: http://embed.plnkr.co/N0rRBS8AXU3jQJjQidIT/
It seems you only need validation on the controller, so to turn off html validation you need novalidate like this in your html:
<form name="yourForm" ng-controller="YourController as yourCtrl" ng-submit="yourCtrl.yourmethod(data)" novalidate>
then you proceed to do your validations in your controller
Here is my option:
(function(){
'use strict';
var app = angular.module('sample', []);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sample">
<form name="userRegister" novalidation>
<div ng-messages="userRegister.name.$error.required"
ng-if="submitted ">
<p ng-message="required">I need your name Sr</p>
</div>
<input type="text" ng-required name="name" ng-model="user.name">
<input value="Send" type="submit" ng-click="submitted=true"/>
</form>
</div>
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
This is my form my HTML
<form id = "myform" name="myform" ng-submit="saveForm()" novalidate >
<div class="input-group">
<span class="input-group-addon"> <img src="/icon.png" alt=""/> </span>
<input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="Username" autofocus required>
</div>
<span ng-show="formInvalid">Please enter username</span>
<button type="submit" class="btn btn-default" id="saveBtn"> Save </button>
</form>
And inside the controller I have
$scope.formInvalid = false;
$scope.saveForm = function(){
if($scope.myform.username.$invalid){
$scope.formInvalid = true;
}
if($scope.myform.$valid){
//....save it....
At first the form has no error message, if I hit "Save" the "Please enter username" appears, so far, all good.
But if I click on the form field to type a username, the error message does not go away. Even if I finish typing and click somewhere else, the error message still does not go away.
I also try
if(!$scope.myform.username.$valid){
$scope.formInvalid = true;
}
and I also try together
if(!$scope.myform.username.$valid){
$scope.formInvalid = true;
}
if($scope.myform.username.$valid){
$scope.formInvalid = false;
}
and the problem is still there. How can I debug? How do I fix this?
Thanks
You don't have to introduce and maintain a new variable ($scope.formInvalid) for managing the state of your form. Angular maintains the valid / invalid state of the form for you.
As your form is named myform, just show the message about the username based on the value of myform.username.$invalid, and save the form only if myform.$valid is true:
HTML
<span ng-show="myform.username.$invalid">Please enter username</span>
JS
$scope.saveForm = function () {
if ($scope.myform.$valid) {
// save the form
}
};
See fiddle
you can try a watch event,
$scope.$watch('myform.$valid', function(n, o) {
if(n) {
$scope.formInvalid = false;
} else {
$scope.formInvalid = true;
}
});
But i might even be a better idea, if you start using validators.
you do not trigger a change to form invalid property anywhere, I suggest you solve this issue with angulars built in validators and ng-messages module, which will listen to changes on you're form inputs and notify when the inputs are valid or invalid and notify the warning text.
Another approach you can take is use the ng-change directive on the inputs you want to listen to changes in and trigger and update on the form invalid property according to the inputs validity.
example : (taken from the official angular website )
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
i think this is the most elegant way to do it.
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>
I have a text box which is using for search.When enter the characters it searches the values and shows one by one in a scrollbar. When i click on any found value it redirects to the related page but when press enter it should call first value in that scrollbar.Below is my code.
<div><input type="text" value="" placeholder="search" ng-model="searchText" name="testName" ng-keyup="search()"></div>
<div class="scroll" ng-show="searchText.length" ng-hide="!searchText.length">
<div ng-repeat="relatedData in data">
<span ng-click="showDetails(relatedData)" ng-model="searchText">{{ relatedData }} </span><br />
</div>
</div>
and below is my script code:
$scope.showDetails = function(relatedData) {
$http.get("searchInfo.json").success(function(response) {
var searchT = relatedData;
$http.get(searchT+'Details.json').success(function(response) {
$scope.details = response;
$scope.searchText = "";
});
});
}
Could you please help to call first value in multiple values scrollbar,Thanks.
One way would be to wrap your search field in a form element:
<form ng-submit="showDetails(data[0])">
<input type="text"
value=""
placeholder="search"
ng-model="searchText"
name="testName"
ng-keyup="search()">
</form>
ng-submit will catch the form submit event triggered by pressing Enter.