I have two images , based on input regex pattern i want to display one image at a time.
My code is
<input type="password" ng-model="password" placeholder="Enter Password"/>
<img src="../close.png" ng-show="password != [a-z]"/>
<img src="../right.png" ng-show="password == [a-z]"/>
What will be solution for this kind of feature.
$scope.checkPassword = checkPassword;
function checkPassword(input){
var onlySmallLetters = /^[a-z]+$/
return onlySmallLetters.test(input);
}<input type="password" ng-model="password" placeholder="Enter Password"/>
<img src="../close.png" ng-if="checkPassword(password)"/>
<img src="../right.png" ng-if="!checkPassword(password)"/>checkPassword method will return false if the input contains any characters other than alphabets so close.png is only shown if the password has only alphabets otherwise right.png is shown
I guess below is what you need.
Ideally input elements should be validated based on pattern and with the pattern result we will show the corresponding message to user.
So instead of checking in img tags I would prefer to check the input itself with ng-pattern and based on the validity of input I am showing the corresponding img.
angular.module('myApp', []);
angular.module('myApp').controller('MyController', MyController);
function MyController($scope) {
};<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<form name="form">
<input type="password" ng-model="password" placeholder="Enter Password" ng-pattern="/^[a-z]*$/" name="password" />
<br>
<img src="../close.png" ng-show="form.password.$invalid && form.password.$dirty" alt="error"/>
<img src="../right.png" ng-show="form.password.$valid && form.password.$dirty" alt="success" />
</form>
</div>Use this :
<input type="password" ng-model="password" placeholder="Enter Password"/>
<img src="../close.png" ng-if="password != [a-z]"/>
<img src="../right.png" ng-if="password == [a-z]"/>
Difference between ngShow and ngIf directive is that ngShow will just hide/show the element with the element being present in the DOM. Whereas ngIf removes the element from the DOM if not used.
var myApp = angular.module('myApp', []);
myApp.controller('controller', function($scope) {
$scope.password;
$scope.hasLowerCase = function (str) {
$scope.lowerStr = angular.lowercase(str);
if($scope.lowerStr == str && str != null && str != '') {
return true;
}
else{
return false;
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="controller">
<input type="password" ng-model="password" placeholder="Enter Password"/>
<br>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/256/success-icon.png" ng-show="hasLowerCase(password)"/>
<img src="https://dialectline.files.wordpress.com/2013/06/sign-error-icon.png" ng-show="!hasLowerCase(password)"/>
</div>