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

Question

我需要在每输入4个数字后添加一个连字符，我在控制台中得到这个，我怎样才能实现这个以改变角度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>

您不需要[(ngModle)]只需保留[ngModel]，因为您正在处理更改事件，而且方法是这样的，您不需要角度self中的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功能获取指令附加到的元素，并检索元素的值并对值进行操作。