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

我需要添加一个连字符后，每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>

控制台

输入

---

需要输入本身中的连字符值

您需要进行如下更改

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

---

您的方法中也存在问题，您需要使用

val

而不是直接使用属性，因为您试图将

val

修改为将值分配给属性。

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

---

您可以使用

HostBinding

功能获取指令附加到的元素，检索元素的值，并对值进行操作

请在输入标签中尝试[value]=“mychange（$event）”。尝试我的更新方法，如我的回答中所示。它应该对您有效让我知道对您有效还是无效谢谢您的评论，但输入中没有任何更改field@AashiqRathnadas-检查我的更新是否适用于此，仍然在输入字段中，并没有必须工作的更改…在您的组件中本地归档板条箱，并让tryLet us。

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