Insert hyphen after certain number of digits using angularjs

Question

I want to insert hyphen to validate a ID number. For example, my card number format would be something like 123 - 2342 - 1232321 - 1 (over all only 15 numbers) user should not be allowed to enter more than 15 digits. I need to add hyphen once the above set of digits is entered by the user with a space before and after each digit. First hyphen should be added after 3 digits , secone hyphen after entering 4 digits, third hyphen to be added after entering 7 digits. How can I validate this?

<div>
    <input type="text" id="tbNum" ng-keypress="addHyphen(this)"
           placeholder="Type some values here" />
</div>

$scope.addHyphen = function(element) {
    let ele = document.getElementById(element.id); // ele doesnt have id value
    ele = ele.value.split('-').join('');   

    let finalVal = ele.match(/.{1,3}/g).join('-');
    document.getElementById(element.id).value = finalVal;
};

I tried to implement the above way , but element.id doesnt capture the id value of the input field.

do you want the exported value to include the hyphens (1234-456-1232321-1 vs 12345678901232321)? — Ambrown
– Ambrown, Commented Nov 13, 2019 at 16:14
You could look into input mask. it's a good way to acheive what you want. — Nicolas
– Nicolas, Commented Nov 13, 2019 at 16:15
rather than passing this, can't you pass $event and read in the srcElement property? — Jonathan Smith
– Jonathan Smith, Commented Nov 13, 2019 at 16:16
When user tries to enter a random digit to the input field, the hyphens should be added automatically ( a hyphen should be added after every 3 digits, after 4 digits, after 7 digits and after 1 digit ) — Jennie Wilson
– Jennie Wilson, Commented Nov 13, 2019 at 16:17

Anand G · Accepted Answer · 2019-11-13 17:56:57Z

1

function addHyphen(elem) {
  if (elem.value.length <= 17) {
    if (elem.value.length === 3) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 8) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 16) {
      elem.value = `${elem.value}-`;
    }
  } else {
    elem.value = elem.value.slice(0, -1)
  }
};

<div>
  <input type="text" id="tbNum" onkeypress="addHyphen(this)" placeholder="Type some values here" />
</div>

You can use regex for that, try below

Try something like below

$scope.addHyphen = function(element) {
  if (elem.value.length <= 17) {
    if (elem.value.length === 3) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 8) {
      elem.value = `${elem.value}-`;
    }
    if (elem.value.length === 16) {
      elem.value = `${elem.value}-`;
    }
  } else {
    elem.value = elem.value.slice(0, -1)
  }
};

PS: below regex can also help

let num = "123234212323211";
console.log(num.replace(/(\d{3})(\d{4})(\d{7})(\d{1})/, "$1-$2-$3-$4"));

Hope this helps

edited Nov 13, 2019 at 17:56

answered Nov 13, 2019 at 16:30

Anand G

3,2102 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jennie Wilson Over a year ago

the number is not hardocded. User will enter it manually. it could be any random numbers. Just that the hyphen has to be added after every 3 digits , after every 4 digits, after every 7 digits. I have added this (123-2342-1232321-1) just as an example to show the format.

Anand G Over a year ago

I know. I too added this to as an example. All you have to do is replace that with element.value. Did you try the angular code I shared there?

Jennie Wilson Over a year ago

Yes, but it doesnt work.can you please add a fiddle $scope.addHyphen = function(element) { let ele = element.target.id; finalVal = ele.value.replace(/(\d{3})(\d{4})(\d{7})(\d{1})/, "$1-$2-$3-$4"); element.target.value = finalVal; }; Hyphen should be added automatically once user finishes entering 3 digits ( 123 - ), second hyphen to be added automatically, once the user enters the next 4 digits ( 123 - 4321 - ), third hyphen to be added automatically once user enters the next 7 digits ( 123 - 4321 - 1234321 - ) and the last digit would be a single digit

Anand G Over a year ago

I have edited the answer. The solution to your problem is regex I gave. Now how you use it is up to you!

Jennie Wilson Over a year ago

No..You are not understanding my question. The point is hyphen should be added automatically after 3 digits, 4digits, and 7 digits. In your code, you are evaluating once all the 15 digits are entered

|

Collectives™ on Stack Overflow

Insert hyphen after certain number of digits using angularjs

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related