CODEWITHSUNDEEP
javascriptangularjshtml
user3864129
user3864129

Reputation: 43

ng-show with regex using angular js

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

Answers (4)

Gangadhar Jannu
Gangadhar Jannu

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.

See the implementation

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

Erdem Aydemir
Erdem Aydemir

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

ArunBabuVijayanath
ArunBabuVijayanath

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

arqam
arqam

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

Related Questions