如何在Angular2中的离子输入字段中插入两个数字后的空间

Question

我正在从事Ionic2应用程序。在这里，我需要以一个方式显示一个输入字段，当用户输入两个数字时，必须将一个空间添加到数字中，每对数字都必须添加一个空白空间。我试图使用jQuery实施此功能。但是在Ionic2中，$(this).val()不起作用。有什么方法可以实现此模式？

以下是我的代码。

toothFn(value) {
  console.log("tooth");
  console.log("toothvalue",value); 
  var foo = value.split(" ").join("");
  if (foo.length > 0) {
    console.log("if");
    foo = foo.match(new RegExp('.{1,2}', 'g')).join(" ");
  }
  console.log("foo", foo);
  return foo;
}

 <ion-list>
 <ion-item>
   <ion-label floating>Tooth Number</ion-label>
   <ion-input type="number" (input)="input = toothFn(input)" oninput="this.value = Math.abs(this.value)" formControlName="toothNum" id="toothNum">
   </ion-input>
 </ion-item>
 <ion-item *ngIf="caseform.controls.toothNum.hasError('required') && caseform.controls.toothNum.touched">
   <p style="color:red">please enter the tooth number!</p>
 </ion-item>
</ion-list>

Answer 1

不确定确切的模式，但您可以检查输入上的每个键盘事件。

例如。

  <ion-input [(ngModel)]="textNumber" (keypress)="validate($event)" (keyup)="addSpace()"></ion-input>
  addSpace(){
    //first remove previous spaces
    this.textNumber = this.textNumber.replace(/s/g, '');
    //then add space (or any char) after second (or any "n-th") position
    this.textNumber = this.chunk(this.textNumber, 2).join(' ');
  }
  //validate and only allow numbers
  validate(event){
      return event.charCode >= 48 && event.charCode <= 57;
  }
  chunk(str: any, position: number){
    let ret = [];
    let i;
    let len;
    for(i = 0, len = str.length; i < len; i += position) {
       ret.push(str.substr(i, position));
    }
    return ret;
  }

这是一个简单的示例：https：//stackblitz.com/edit/input-check

ps。type="number"定义A 数字输入字段和浮点数，这意味着它不仅限于数字，例如，您可以添加char e 因为E是数学常数。