I am trying to write custom directive for USA telephone number using angularjs and need to preserve the data type of the field as integer.Here is the jsfiddle directive and need help to complete the directive.
If user enters a valid telephone no (exactly 10 numbers ie.1234567890) then input should split into 3 chunks as 123-456-7890 when the user moves to next control.otherewise I should show error message "not a valid number".
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
<input type="text" ng-model="telephone" phoneformat name="input1" />
<span class="error" ng-show="myForm.input1.$error.telephone">Numbers only!</span>
<span class="error" ng-show="myForm.input1.$error.telephone">Exact 10 Numbers only!</span>
</form>
</div>
var myApp = angular.module("myApp", []);
var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
$scope.telephone = "1234567890";
}]);
myApp.directive("phoneformat", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, element, attr, ngModelCtrl) {
var phoneformat = function () {
}
}
};
});
It looks like you want to leverage the $error property of the form to drive validation. To do this, you will need to call $setValidity in the ngModelCtrl that you have required into your directive:
var myApp = angular.module("myApp", []);
var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
$scope.telephone = "1234567890";
}]);
myApp.directive("phoneformat", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, element, attr, ngModelCtrl) {
//Parsing is performed from angular from view to model (e.g. update input box)
//Sounds like you just want the number without the hyphens, so take them out with replace
var phoneParse = function (value) {
var numbers = value && value.replace(/-/g, "");
if (/^\d{10}$/.test(numbers)) {
return numbers;
}
return undefined;
}
//Formatting is done from view to model (e.g. when you set $scope.telephone)
//Function to insert hyphens if 10 digits were entered.
var phoneFormat = function (value) {
var numbers = value && value.replace(/-/g,"");
var matches = numbers && numbers.match(/^(\d{3})(\d{3})(\d{4})$/);
if (matches) {
return matches[1] + "-" + matches[2] + "-" + matches[3];
}
return undefined;
}
//Add these functions to the formatter and parser pipelines
ngModelCtrl.$parsers.push(phoneParse);
ngModelCtrl.$formatters.push(phoneFormat);
//Since you want to update the error message on blur, call $setValidity on blur
element.bind("blur", function () {
var value = phoneFormat(element.val());
var isValid = !!value;
if (isValid) {
ngModelCtrl.$setViewValue(value);
ngModelCtrl.$render();
}
ngModelCtrl.$setValidity("telephone", isValid);
//call scope.$apply() since blur event happens "outside of angular"
scope.$apply();
});
}
};
});
Working fiddle. This was just a quick way of demonstrating the parser and formatter pipelines that are used in ngModel, along with $setValidity -- which is used to populate the $error field(s).
Update: To use this same phone validation across multiple phones, use form with $error. Notice that each input gets a unique name that is used with myForm (name of form). Both use $error.telephone:
<form name="myForm">
Mobile Phone:
<input type="text" ng-model="mobilephone" phoneformat name="mobilephone" />
<span class="error" ng-show="myForm.mobilephone.$error.telephone">
Exact 10 Numbers only!
</span>
<br />
Home Phone:
<input type="text" ng-model="homephone" phoneformat name="homephone" />
<span class="error" ng-show="myForm.homephone.$error.telephone">
Exact 10 Numbers only!
</span>
</form>
Updated fiddle.
You might want to use http://angular-ui.github.io/ui-utils/ Mask directive.
Working Fiddle: http://jsfiddle.net/HB7LU/6581/
myApp.directive("phoneFormat", function () {
return {
restrict: "A",
link: function (scope, element, attr) {
element.bind('change', function() {
if ( this.value.length === 10 ) {
var number = this.value;
this.value = number.substring(0,3) + '-' + number.substring(3,6) + '-' + number.substring(6,10)
}
else {
document.querySelector('.helpblock').innerHTML = 'error in formatting';
}
});
}
};
});
Iv'e extended your original fiddle. here's the result:
http://jsfiddle.net/10k58awt/
You can find splittedNumber array (contains 3 parts of number) on form submission
js:
var myApp = angular.module("myApp", []);
var myCtrl = myApp.controller("myCtrl", ["$scope", function ($scope) {
$scope.telephone = "1234567890";
$scope.submit = function () {
var splittedNumber = [$scope.telephone.substring(0, 3), $scope.telephone.substring(3, 6), $scope.telephone.substring(6, 10)];
// Do something with splitted number
console.log(splittedNumber);
};
}]);
myApp.directive("phoneformat", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (phoneInput) {
phoneInput = phoneInput.trim();
if (phoneInput && phoneInput.length == 10 && !isNaN(phoneInput)) {
ctrl.$setValidity('phoneformat', true);
return phoneInput;
} else {
ctrl.$setValidity('phoneformat', false);
return undefined;
}
});
}
};
});
html:
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate ng-submit="myForm.$valid && submit()">
<input type="text" ng-model="telephone" phoneformat name="input1" /> <span class="error" ng-show="myForm.input1.$error.phoneformat">Invalid US Phone number!</span>
<div>
<button class="btn btn-primary" type="submit" ng-class="{'disabled': !myForm.$valid}">submit</button>
</div>
</form>
</div>
Related
In my angular-material app I have a field with validation:
<input type="number" ng-model="myValue"
name="myValue"
min="0" max="100"
ng-pattern="/^[0-9]\d*(\.\d+)?$/" required>
It works fine. But now I need to make it to allow user to type .75 and get instead of 0.75
So the question how to apply my filter:
if( myValue.substring(0,1) == "." ){
myValue = "0" + myValue;
}
before angular material ng-pattern and type="number" validation
You can write some directive with $filter, $formatters and $parsers:
app.directive('parser', ['$filter',
function($filter) {
return {
restrict:'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$formatters.unshift(function (a) {
return $filter('myFilter')(ctrl.$modelValue)
});
ctrl.$parsers.unshift(function (viewValue) {
element[0].value = $filter('myFilter')(element[0].value);
return element[0].value;
});
}
};
}
]);
app.filter('myFilter', [
function() {
return function(input) {
if( input && input.substring(0,1) == "." ){
input = "0" + input;
}
return input;
};
}
]);
DEMO Plunkr
However you cannot use type number because as I remember . not supported and doesn't parses as integer
Hope it will give you direction
I am creating a project using AngularJS and I want to integrate validation in AngularJS. My requirement is that the number should be between the 1-4096 in AngularJS.
Here is my code:
<div class="col-lg-6 col-md-6">
<input type="text" class="form-control" placeholder="VLAN ID" ng-model="exchange.vlanId" valid-number/>
</div>
You should create very simple directive that would allow to validate input in reusable, configurable and declarative way.
You already have valid-number attribute, so the implementation can look like:
angular.module('demo', []).directive('validNumber', [function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
if (!ctrl) return;
var range = attrs.validNumber.split(',').map(Number);
ctrl.$validators.validNumber = function(value) {
return value >= range[0] && value <= range[1];
};
}
};
}]);
.error {color: brown;}
<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<div ng-app="demo">
<form name="form">
<input type="text" class="form-control" placeholder="VLAN ID" name="vlanId"
ng-model="exchange.vlanId" valid-number="1,4096" />
</form>
<div class="error" ng-show="form.$dirty && form.vlanId.$error.validNumber">VLAN ID should be in range 1-4096.</div>
</div>
You can bind an event on the input and call a function with passing the model in it:
<input type="text" class="form-control" placeholder="VLAN ID"
ng-model="exchange.vlanId"
ng-keydown="obj.validate(exchange.vlanId)" valid-number/>
Now in the controller you can define a method:
yourApp.controller('theController', ['$scope', function($scope){
$scope.obj = {
validate:function(val){
if(val < 1 || val > 4096){
alert(val+' is out of range');
}
}
};
}]);
And the directive valid-number can also be used:
yourApp.directive('validNumber', function($scope){
return {
restrict:'E',
link:function(scope, el, attrs){
el.on('keydown', function(){
el.css('border', function(){
return scope.exchange.vlanId < 1 || scope.exchange.vlanId > 4096
? "red" : "green";
});
});
}
};
});
What code changes need to be made to get the custom countparens directive below to provide the extra custom string validation shown below during form validation? The code below DOES successfully alert the user when the input field is empty, but it IS NOT alerting the user when the number of open parens ( and close parens ) is not equal.
I am using AngularJS. I used the documentation at this link (scroll to bottom) to design the code below.
Here is the html for the form:
<table>
<tr>
<td width=200>
<form name="userForm" ng-submit="rectangularForm(userForm.$valid)" novalidate>
<input type="text" name="fieldname" ng-model="nameofjsontype.fieldname" required />
<p ng-show="userForm.fieldname.$invalid && !userForm.fieldname.$pristine" class="help-block">Function is a required field.</p>
<span ng-show="userForm.nameofjsontype.fieldname.$error.countparens">The #( != #) !</span>
<br>
<button type="submit" ng-disabled="userForm.$invalid" >Click to submit</button>
</form>
</td>
</tr>
</table>
The javascript file containing the directive includes:
// create angular app
var myApp = angular.module('myApp', []);
// create angular controller
myApp.controller('myController', ['$scope', '$http', function($scope, $http) {
$scope.nameofjsontype = {type:"nameofjsontype", fieldname: 'some (value) here.'};
$scope.rectangularForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
var funcJSON = {type:"nameofjsontype", fieldname: $scope.nameofjsontype.fieldname};
$http.post('/server/side/controller', funcJSON).then(function(response) {
$scope.nameofjsontype = response.data;
});
}
};
}]);
myApp.directive('countparens', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.countparens = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty models to be valid
return true;
}
if (
($scope.nameofjsontype.fieldname.match(/\)/g).length) == ($scope.nameofjsontype.fieldname.match(/\(/g).length)
) {
// it is valid
return true;
}
// it is invalid
return false;
};
}
};
});
Your markup should be using userForm.fieldname.$error.countparens to show the error. The field bound to the userForm is NOT the same as your ngModel value. See plunker for what I mean
<span ng-show="userForm.fieldname.$error.countparens" class="help-block">The #( != #) !</span>
You are also not using your directive on your input element:
<input type="text" name="fieldname" ng-model="nameofjsontype.fieldname" required data-countparens=""/>
In your directive
you should be using modelValue and not the scope value when doing your matching AND
you need to cater for when there are no matches to ( or )
.
myApp.directive('countparens', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.countparens = function(modelValue, viewValue) {
return ctrl.$isEmpty(modelValue) ||
((modelValue.match(/\)/g) || []).length == (modelValue.match(/\(/g) || []).length);
};
}
};
});
I have a stuff which uses ui.bootsrap tool-tip feature, the code is working fine, but I don't know to show and hide the tooltip through script, say I am having a form which some field validation, when I submit the form, if the validation for a component say (a text field for email) fails, then it should shows up a tool-tip it should not go unless the field is properly validated,
Can anyone please tell me some solution for this
script
var app = angular.module('someApp', ['ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.validate = function () {
var re = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var emailValid = re.test($scope.userEmail);
if(!emailValid)
{
// I want to show the tool tip
}
};
})
html
<div ng-app="someApp" ng-controller="MainCtrl">
<form ng-submit="validate()">
<input type="text" ng-model='userEmail' rc-tooltip="Invalid Email...." tooltip-placement="bottom" />
<input type="submit" />
</form>
</div>
JSFiddle
Demo
Here is a simple email validation directive that uses bootstrap:
app.directive('email', function() {
return {
restrict: 'A',
require: 'ngModel',
compile: function(element, attr) {
element.tooltip({ placement: 'right', title:'Email is invalid', trigger:'manual'});
function emailValid(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var valid = re.test(email);
return valid;
}
return function(scope, element,attr, ngModel) {
ngModel.$validators.email = function(val) {
return emailValid(val);
}
scope.$watch(function() {
return ngModel.$error.email;
}, function(val) {
if (val)
element.tooltip('show');
else
element.tooltip('hide');
});
}
}
}
});
Usage
<input type="text" ng-model="email" email />
Its given hereBootstrap Tooltip
And by using data-toggale option using javascript ,you can use tooltip.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
By above code you can assign tooltip then to show and hide you can use
$('#element').tooltip('show')
or
$('#element').tooltip('hide')
Hi i am new to angularjs we want to implement a input text box which will allow only six digits and after entering six digits a comma separated will add and enter another six digits . Can you please help me. The sample code we have now is
**html**
<div ng-controller="MyCtrl">
<input type="text" ng-model="number" required="required" numbers-
only="numbers-only" />
</div>
Angular js controller
angular.module('myApp', []).directive('numbersOnly', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == undefined) return ''
var transformedInput = inputValue.replace(/[^0-9]/g, '');
if (transformedInput!=inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});
function MyCtrl($scope) {
$scope.number = ''
}
fiddler link we found
http://jsfiddle.net/thomporter/DwKZh/
have a look at ui-mask, set the mask as 999999-999999 or you can also use angular-input-mask
Edit your angular directive and bind a key press event to the textbox element. Inside the event check length. If length is 6 add a comma and rebind new value to your text box.
All you got to do is attach a key press event inside the directive link and check for input length and act accordingly. Instead of modifying your code, I pretty much wrote my own. Here is a DEMO
Here is the HTML code:
<div ng-app="myApp" ng-controller="MyCtrl">
<input type="text" ng-model="number" number-only required="required" />
</div>
Here is the modified directive code:
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
}])
app.directive('numberOnly', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
// Attach key press event
elem.bind('keypress', function(e) {
// Check if its a number
if (e.which >= 48 && e.which <= 57) {
var ar = scope.number.split(',');
if (ar[ar.length - 1].length >= 6) {
scope.number = scope.number + ',';
}
scope.$apply();
}
else {
e.preventDefault();
}
});
}
}
});