angular2--input框验证手机号，只能输入数字并且不能超过11位数

第一种：

html
maxlength为限制输入框输入的最长长度，因为我这里对input做了一些空格加入，所以变成13，要是你们不做分隔，写11就行

<input type="text" id="name"  maxlength="13" placeholder="请输入手机号码" (keyup)='onPhoneup($event)' (keypress)='onPhonepress($event)' />

ts:

export class XXX {
  public phoneNumber: any = '';
  //字符分隔
  onPhoneup(event) {
   let input = event.target;
    let value = input.value.replace(/[^0-9]/ig, '');
    var arr = value.split('');
    if (arr.length >= 4) {
      arr.splice(3, 0, ' ');
    }
    if (arr.length >= 9) {
      arr.splice(8, 0, ' ');
    }
    input.value = arr.join('');
    // 输完11位之后
    let phone = event.target.value.replace(/\s+/g, '');
    this.phoneNumber = phone;
  }

  onPhonepress(event) {
  	// 判断是否为数字
  	let inputStr = String.fromCharCode(event.keyCode);
  	let re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字
  	if(!re.test(inputStr)) {
  		return false;
  	}
  }
}

第二种：

<input type="tel"  [(ngModel)]="phoneNumber" maxlength="11" placeholder="请输入手机号" (keypress)='onPhonepress($event)' />

//(ngModelChange)="test($event)"    这个属性可以在用户输入数值时调用一个方法，可以不用onPhonepress，或者onKeyUp了

export class XXX {
  public phoneNumber: any = '';    //双向绑定直接就可以获取输入的值了
  onPhonepress(event) {
  	// 判断是否为数字
  	let inputStr = String.fromCharCode(event.keyCode);
  	let re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字
  	if(!re.test(inputStr)) {
  		return false;
  	}
  }
}