AngularJS 输入验证

Question

我有这个html

<ons-input id="username" modifier="underbar" name="username" placeholder="Nombre de usuario" float ng-model="page.username" ></ons-input>

<ons-input id="password" modifier="underbar" name="password" type="password" placeholder="Contraseña" float ng-model="page.password" ></ons-input>
<img ng-click="login()" class="boton-login" src="img/boton_acceder.png"></img>

我的登录功能是这样的。

$scope.login = function(){
    if ($scope.page.username.length==0 || typeof $scope.page.username =="undefined"){
       ons.notification.alert("Error");
 }else{
      //More code.
   }
}

我收到错误：Cannot read property 'username' of undefined，我已经尝试使用 $dirty 的 angularjs 类和 $error，但仍然遇到同样的问题，所以如果有人知道如何在我点击按钮时知道我的输入是否为空，请帮助我

Answer 1

$scope.page 在计算 $scope.page.username 时未定义。如果您检查当时是否定义了 $scope.page，应该可以工作：

$scope.login = function(){
    if ($scope.page.username.length==0){
       ons.notification.alert("Error");
 }else{
      //More code.
   }
}

此外，如果您希望 $scope.page 对象始终存在（从一开始），您应该在控制器中定义 $scope.page = { username: '' }。

Answer 2

发生这种情况是因为您没有定义 page。

我建议你这样做：

app.controller('demoCtrl', function ($scope) {
    $scope.page = { username: new String() };

    $scope.login = function () {
        if ($scope.page.username !== undefined)
            if ($scope.page.username.length === 0)
                console.log('error');
            else
                console.log('ok');

    }
});

Demo

AngularJS 输入验证

AngularJS input validation

angularjs

onsen-ui