angular2+onsenui--监听input框输入，input的值不为空时，提交按钮激活

XXX.html

input框使用有两个事件：keyup【获取输入框的值】和keypress【验证是否为数字】
按钮的效果变化有两个属性绑定：

//动态给按钮增加样式    --按钮无效时为灰色   --active激活时为黄色
 [ngClass]="{'active':isCode==true}"

//给按钮添加是否点击判断
[disabled]="codeDisabled"

<div class="content">
	<div class="r-input clearfix">
		<input type="text" id="name"  maxlength="13"  placeholder="请输入新手机号" (keyup)='onPhoneup($event)' (keypress)='onPhonepress($event)' />
	</div>
	<div class="r-input r-input2 clearfix">
		<input type="text" id="code" (keyup)='onCodeup($event)' placeholder="请输入验证码" />
		<ons-button  [ngClass]="{'active':isCode==true}" [disabled]="codeDisabled">获取验证码</ons-button>
	</div>
	<p class="r-attach">修改成功后需使用新手机号码登录</p>
	<div class="r-btn" >
		<ons-button [ngClass]="{'active':isSumit==true}" [disabled]="sumitDisabled">完成</ons-button>
	</div>
</div>

xxx.ts

export class EditPhoneNum {
	public name: string = ''; //用户名
	public code: any; //验证码
	public isCode: any = false; //激活获取验证码按钮
	public isSumit: any = false; //激活获取验证码按钮
	public codeDisabled: any = true; //验证码按钮默认为不可点击
	public sumitDisabled: any = true; //提交按钮默认为不可点击

//获取电话号码，激活验证码按钮
  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.name = phone;
	this.activeCodeBtn();
  }

  onPhonepress(event) {
// 判断是否为数字
    let inputStr = String.fromCharCode(event.keyCode);
    let re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字
    if (!re.test(inputStr)) {
      return false;
    }
  }
  
  //验证码
  onCodeup(event){
  	let input =event.target.value;
  	this.code=input;
  	this.activeSumitBtn();
  }
  
  //激活验证码按钮 
  activeCodeBtn(){
	if(this.name != '') {
		this.isCode = true;
		this.codeDisabled=false;
	}else{
		this.isCode = false;
		this.codeDisabled=true;
	}
  }
  
  //激活提交按钮
  activeSumitBtn(){
  	if(this.code != '') {
  		this.isSumit = true;
  		this.sumitDisabled=false;
  	}else{
  		this.isSumit = false;
  		this.sumitDisabled=true;
  	}
  }
  
}

xxx.css

.clearfix {
  content: '';
  clear: both;
  display: block;
  overflow: hidden;
}

.clearfix:after {
  content: '';
  clear: both;
  display: block;
  overflow: auto;
  zoom: 1;
}
.r-input{
	background-color: #fff;
	padding: 12px;
	border-top: 1px solid #f2f2f2;
}

.r-input:first-child{
	margin-top: 10px;
	border-top: none;
}

.r-input input{
	font-size: 16px;
	width: 60%;
	float: left;
}

.r-attach{
	padding: 10px;
	color: #4a90e2;
	font-size: 14px;
}

.r-input.r-input2{
	padding: 8px 12px;
}

input#code {
	margin-top: 3px;
}

.r-input ons-button{
	width: 30%;
	text-align: center;
	float: right;
	color: #fff;
	font-size: 14px;
	margin-right: 10px;
	background-color: #b1b1b1;
	padding: 1px 0;
}

.r-input ons-button.active{
	background-color: #ffaf2c;
}


.r-btn{
	margin: 80% auto 0;
	width: 80%;
}

.r-btn ons-button{
	width: 100%;
	background-color: #b1b1b1;
	color: #fff;
	font-size: 15px;
	text-align: center;
	padding: 5px 0;
	border-radius: 5px;
}

.r-btn ons-button.active{
	background-color: #ffaf2c;
}