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

时间:2018-03-22 05:48:12

标签: angular input credit-card

我需要在每输入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>

控制台

enter image description here

输入

enter image description here

输入本身需要连字符值

2 个答案:

答案 0 :(得分:2)

您需要进行以下更改

<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修改为为属性赋值。

答案 1 :(得分:0)

创建一个指令来实现这一目标。

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