angular、ionic、文本框只允许输入数字或几位小数的数字

如果需求只是要求只允许输入数字，那么：

HTML5方案:

<input type="number" />

ionic组件方案:

<ion-input [(ngModel)]="input_value" type="number"></ion-input>

 

如果需求是可以输入小数，但最多N位，那么：

*.html:

<ion-input [(ngModel)]="input_value" type="text"  (ionChange)="checkInput($event)"></ion-input>

*.ts

  checkInput(event) {
    let input_value = event.target.value;//获取input的id
    var reg = /^\d+\.?(\d{1,4})?$/; //匹配正则
    while (input_value !='' && !reg.test(input_value)) {
      input_value = this.checkStr(input_value)
    }
    this.input_value = input_value;
    event.target.value = input_value;
  }

  //检查是否符合金额格式:只能输入数字且最多保留小数
  private checkStr(str) {
    if (str.split('.').length > 2) {
      str = str.substring(0,str.lastIndexOf('.'));
    }else{
      str = str.substring(0, str.length - 1);
    }
    return str;
  }