Angular 2 : add hyphen after every 4 digit in inpu

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

Answer 1

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.

Answer 2

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.