使用angular怎么监听input输入

这期内容当中小编将会给大家带来有关使用angular怎么监听input输入，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

jsp：

<formclass="registerng-scope"ng-app="regist_app"onsubmit="registSumbitValid()"ng-controller="regist_control">

<divclass="item">
<inputid="username"name="username"placeholder="请填写11位手机号码"class="input-item"ng-model="username">
<spanclass="warnning">{{username_error}}</span>
</div>
</form>

这里需要添加ng-app以及ng-controller来规定一个angularApp的范围，再在input标签中添加ng-model属性，让angularjs根据这个属性来监听输入，根据输入把用户提示放到{{username_error}}中

js：

varusernameValid=false;
varregistApp=angular.module('regist_app',[]);
registApp.controller('regist_control',function($scope){
$scope.username="";
$scope.username_error="";
varphonePattern=/\D+/;
/*验证号码输入*/
$scope.$watch('username',function(newValue,oldValue){
if(newValue!=oldValue){
if(newValue==""){
$scope.username_error="号码不能为空";
usernameValid=false;
}
elseif(phonePattern.test(newValue)){
$scope.username_error='只能输入数字';
usernameValid=false;
}
elseif(newValue.length!=11){
$scope.username_error='格式不正确，请输入11位号码';
usernameValid=false;
}elseif(newValue.length==11){
$scope.username_error="";
usernameValid=true;
}
}
});
}

scope.scope.watch(参数，function)，这个参数就是input的ng-model的值。function的第一个参数是新的值，第二个参数是旧的值，可以判断newValue来给用户相应的提示，结合pattern来判断用户输入是否合法。一个Controller中可以有多个scope.scope.watch(),这里我只贴出一个input的验证方法，其他的都差不多。

usernameValid这个值用来记录当前的input输入是否合法，用于表单提交时根据usernameValid来判断。

上述就是小编为大家分享的使用angular怎么监听input输入了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。