Angular 2：输入每4位后加连字符，卡号输入

Question

我需要在输入的每 4 位数字后添加一个连字符，我在控制台中得到了这个，我怎样才能实现这个以更改 angular 2

中的输入

我使用的代码如下 .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>

控制台

输入

输入本身需要连字符值

Answer 1

您需要进行如下更改

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

你不需要 [(ngModel)] 只需保留 [ngModel] 因为你正在处理更改事件，并且从方法中这样做，你不需要 self 在 angular this 会好的。

  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;
  }

你的方法也有问题，你需要直接使用 val 而不是属性因为你试图修改 val 为属性赋值.

Answer 2

创建一个指令来实现这一点。

您可以使用 HostBinding 功能获取指令附加到的元素并检索元素的值并对值进行操作。

Angular 2：输入每4位后加连字符，卡号输入

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

angular

input

credit-card