Reputation: 43
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.
Upvotes: 3
Views: 1667
Reputation: 4454
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>
Upvotes: 1
Reputation: 389
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>
Upvotes: 0
Reputation: 510
$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
Upvotes: 2
Reputation: 3809
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.
Upvotes: 0