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

【问题标题】：Angular 2 : add hyphen after every 4 digit in input , card number inputAngular 2：在输入的每4位数字后添加连字符，输入卡号
【发布时间】：2018-08-31 11:06:59
【问题描述】：

我需要在我输入的每 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 标签中尝试 [value] = "mychange($event)"。
尝试我在回答中给出的更新方法，它应该适合你
让我知道这对你有用与否

标签： angular input credit-card

【解决方案1】：

您需要进行如下更改

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

您不需要[(ngModel)]，只需保留[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 为属性赋值。

【讨论】：

感谢评论，但是输入字段没有变化
@AashiqRathnadas - 检查我的更新是否对我有用
试过了，输入框还是没有变化
必须工作...crate 在您的组件中本地归档并尝试
让我们continue this discussion in chat。

【解决方案2】：

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

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

【讨论】：