I am trying to pass two regex variable regex1 and regex2 for email and mobile number into single ng-pattern by using "OR" condition but it is not working. if i pass a single variable at a time then it works perfectly. So what i have to do to pass two variable at a time into single ng-pattern directive.
please suggest solution..
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form>
</div>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
});
</script>
</body>
</html>
What you can do is create a function in which you can taken both regex and based on these regex return true and false and from ng-pattern call that function
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head>
<meta charset="utf-8">
<title>Form Validate</title>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
</style> </head> <body> <div ng-controller="myCtrl"> <form name="frm">
<input type="text" name="udetail" ng-model="user.udetail" placeholder="Enter email or phone number" ng-pattern="regex1 || regex2" required>
<span ng-show="frm.udetail.$dirty && frm.udetail.$error.required">required</span><br>
</form> </div> <script src="https://code.angularjs.org/1.2.3/angular.min.js"></script> <script>
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) {
$scope.regex1 = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$scope.regex2 = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/; });
$scope.runBothRegex = (function(){
return {
var value = $scope.user.udetail;
if(regex1.test(value) || regex2.test(value)){
return true;
}
return false;
}
})();
</script> </body> </html>
Related
I am learning AngularJS and trying to understand the $scope part, I was trying to do string combine by creating three variables(ng-model) and see how javascript works with angularJS. Say if I insist on creating three of the ng-model, how do I combine the two strings and put them together in the rstString? I tried to read the $scope elements and the data is there, so what did I miss? Thank you.
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.rstString = $scope.firstString +$scope.secondString;
});
</script>
</body>
</html>
I added a button in your example :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString = 'hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
You can do like this too :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString"/><br><br>
Second String: <input ng-model="secondString"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstString = 'hello ';
$scope.secondString = ' world ';
$scope.rstString = 'aaa';
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
you can use ng-change event
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '" ng-change="handleChange()"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'" ng-change="handleChange()"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.handleChange = () => {
$scope.rstString = $scope.firstString +$scope.secondString;
};
});
</script>
</body>
Hi Guys I am an Entry level programmer for angularJS i tried to use ng-show but i dont know why its not been working. I used latest version of Angular js-1.7.9.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index Page</title>
</head>
<body >
<div ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagaph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</div>
<script src="./js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
</script>
</body>
</html>
I tried to solve by many possibilites but couldn't get on the error. Thanks in Advance.
Fix the typo:
̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶P̶a̶r̶a̶g̶a̶p̶h̶(̶)̶"̶>̶C̶l̶i̶c̶k̶ ̶M̶e̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
<button ng-click="showParagraph()">Click Me</button>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagraph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</body>
I have an ng-required condition on my TextEdit.
When I check the google inspection screen, I can see that my condition works properly (Test.Pack.substring(0,2) != 'RR')
However, I see that even though ng-required = false, it is still has a required = "required" property on the element.
my code and screenshot in below. Is there any idea about this?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="TestList" id="InsertForm" ng-submit="insert(Test);">
<div>
<input ng-model="Test.Pack" >
</div>
<div>
<input ng-model="Test.LM" ng-required="{{Test.Pack.substring(0,2) != 'RR'}}">
</div>
<div>
<button ng-disabled="TestList.$invalid">Test Button</button>
</div>
</form>
</div>
</body>
</html>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
app.controller('myCtrl', function($scope) {
});
</script>
The value passed to ng-required should be boolean.So change this
<div>
<input ng-model="Test.LM" ng-required="{{Test.Pack.substring(0,2) != 'RR'}}">
</div>
to
<div>
<input ng-model="Test.LM" ng-required="Test.Pack.substring(0,2) != 'RR'">
</div>
I am trying to validate my angular form with a number input. I have styled my number input ( which i have not included in my demo) so that i use stepUp() and stepDown() to increment and decrement values.
Here's my demo : http://plnkr.co/edit/9aBCTI6hcCM0HhHimVnL?p=preview
form.numbah.$valid and the number's ng-model doesn't change when i used stepUp()/stepDown() to increment/decrement values.
I want to validate form when there's a change in the number input.
Thanks in advance!
angular.module('plunker', [])
.controller('MainCtrl', function($scope, $document) {
$scope.numbah = -1;
$scope.stepup = function(){
document.getElementById("test-input").stepUp();
// $scope.numbah++;
};
$scope.stepdown = function(){
document.getElementById("test-input").stepDown();
// $scope.numbah--;
};
$scope.change = function (value){
alert(value);
};
});
/* Styles go here */
input[type=number]{
width: 40px;
}
div {
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MainCtrl">
<form>
<p>Click stepdown/stepup buttons. You will see that form.numbah.$valid and numbah won't change</p>
<p>But, If you click spin buttons inside number input, then everything works fine</p>
<ng-form name="form">
<input id="test-input" name="numbah" type="number" ng-model="numbah" min="1" max="3" />
<div>form.numbah.$valid: {{form.numbah.$valid}}</div>
<div>Value of number : {{numbah}}</div>
<div>
<input type="button" ng-click="stepup()" value="stepup">
<input type="button" ng-click="stepdown()" value="stepdown">
</div>
<div>form.$valid : {{form.$valid}}</div>
</ng-form>
</form>
<script src="angular.js"></script>
<script src="script.js"></script>
</body>
</html>
This input value should be "Paris" but it does not display.
What is wrong with my code?
(function(angular, undefined) {
var mon_app = angular.module('mon_app', []);
angular.module('mon_app').controller('monctrl', function($scope) {})
}(window.angular));
<!DOCTYPE html>
<html class="app" ng-app="mon_app">
<head lang="fr" class="app">
</head>
<body>
<div ng-controller="monctrl">
This input value is "Paris"
<input name="lieu" ng-model="lieu" type="text" value="Paris" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>
You cannot mix regular HTML (the value attribute of your input) and the angular-driven ng-model. The input will always display the value of what's in ng-model, here lieu, hence you should iniialize $scope.lieu with the Paris value.
(function(angular, undefined) {
var mon_app = angular.module('mon_app', []);
angular.module('mon_app').controller('monctrl', function($scope) {
$scope.lieu = "Paname";
})
}(window.angular));
<!DOCTYPE html>
<html class="app" ng-app="mon_app">
<head lang="fr" class="app">
</head>
<body>
<div ng-controller="monctrl">
This input value is "{{lieu}}"
<input name="lieu" ng-model="lieu" type="text"/>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>