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 gi

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.