Angular 2 : add hyphen after every 4 digit in input , card number input

Question

i need to add an hyphen after every 4 digit i enter, i am getting this in the console , how can i can achieve this to change in the input in angular 2

Code i used given below .ts

mychange(val){
  var self = this;
  var chIbn = self.storeData.iban_no.split("-").join("");
  if (chIbn.length > 0) {
   chIbn = chIbn.match(new RegExp('.{1,4}', 'g')).join("-");
 }
 console.log(chIbn);
 self.storeData.iban_no = chIbn;
}

Html

 <input type="text" name="din" (ngModelChange)="mychange($event)"  class="form-control" [(ngModel)]="storeData.iban_no"   required>

Console

input

need that hyphen value in input itself

try my updated method as given in my answer it should work for you — Pranay Rana, Mar 22 '18 at 06:16

score 3 · Accepted Answer · edited Dec 02 '19 at 16:08

3

You need to do changes as below

<input type="text" name="din" (ngModelChange)="mychange($event)"  
class="form-control" [ngModel]="iban_no"   required>

you don't need [(ngModel)] just keep [ngModel] as you are taking care of change event and from method do like this, you don't need self in angular this will be okay.

  mychange(val) {
    const self = this;
    let chIbn = val.split('-').join('');
    if (chIbn.length > 0) {
      chIbn = chIbn.match(new RegExp('.{1,4}', 'g')).join('-');
    }
    console.log(chIbn);
    this.iban_no = chIbn;
  }

there is issue in your method too, you need to use val instead of property directly as you are trying to modify val as assigning value to property.

edited Dec 02 '19 at 16:08

Community

1
1

answered Mar 22 '18 at 05:53

Pranay Rana

175,020
35
237
263

Thanks for the comment, But there is no change in the input field – Aashiq Rathnadas Mar 22 '18 at 06:03
@AashiqRathnadas - check my update its working for me – Pranay Rana Mar 22 '18 at 06:15
Tried this, Still in input field there is no change – Aashiq Rathnadas Mar 22 '18 at 06:26
that must work...crate filed locally in your component and have try – Pranay Rana Mar 22 '18 at 06:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/167381/discussion-between-aashiq-rathnadas-and-pranay-rana). – Aashiq Rathnadas Mar 23 '18 at 03:51
@AashiqRathnadas - hi dont have access to chat room right now ..can try to talk tomorrow if you want – Pranay Rana Mar 23 '18 at 05:33
hi, How can i change the pattern to 1111-11111111 , hyphen only at first 4th digit – Aashiq Rathnadas Mar 26 '18 at 12:24

score 0 · Answer 2 · answered Mar 22 '18 at 06:06

0

Create a directive to achieve this.

You can use the HostBinding feature to get the element to which the directive is attached to and retrieve the value of the element and do your manipulations to the value.

answered Mar 22 '18 at 06:06

Arjun Panicker

730
1
8
20

Angular 2 : add hyphen after every 4 digit in input , card number input

2 Answers2

Linked

Related