Question

如果用户被禁用，我想在“电子邮件地址”输入下显示错误消息，如果用户在“密码”输入下无效，则显示单独的错误消息。调试时我发现如果用户被禁用“状态代码为503”，如果输入无效，则“状态代码为400”。

HTML

<md-content id="login" layout="column" layout-align="center center" class="inputdemoErrors">
<div flex="25"></div>
  <p class="m0">project</p>
    <form id="loginForm">
      <md-input-container>
        <label for="username">Email Address</label>
      </md-input-container>
      <md-input-container class="email-field">
        <input name="username" id="username" type="email" class="validate" ng-model="username" enter-key="submitLogin()" autocomplete="off" required>
        <div ng-show="disabled" ng-messages="loginForm.username.$error" role="alert">
          <div ng-message="required">User Account is Disabled</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label for="password">Password</label>
      </md-input-container>
      <md-input-container class="password-field">
        <input name="password" id="password" type="password" class="validate" ng-model="password" enter-key="submitLogin()" autocomplete="off" required>
        <div ng-show="invalid" ng-messages="loginForm.password.$error" role="alert">
          <div ng-message="required">Invalid Email or Password</div>
        </div>
      </md-input-container>
<a class="waves-effect waves-light btn-large" style="width: 100%; margin: 0; background-color: #29B6F6;" ng-click="submitLogin()">Login</a>
  </form>
</md-content>

JS

  angular
   .module('login')
   .controller('LoginCtrl', LoginCtrl);

  function LoginCtrl($scope, $location, SecService, RecService, Service) {
  var vm = this;
  vm.ctrlName = 'LoginCtrl';

  $scope.submitLogin = function() {
  $scope.invalid = $scope.loginForm.$invalid;
  if($scope.invalid) {
    return;
  }
  else
    $scope.dataLoading = true;
    var creds = {
      username: $scope.username,
      password: $scope.password
    };
    SecService.login(creds).then(function (response) {
      if (response.success) {
        RecService.connect();
        SecService.setCredentials($scope.username, $scope.password);
        Service.loadCurrentUser();
        $location.path('/main');
      } 
      if (response = 503)
      {
        $scope.disabled = $scope.loginForm.$disabled;
        if ($scope.invalid) return invalid;
      }
      if (response = 400)
      {
        $scope.invalid = $scope.loginForm.$invalid;
        if ($scope.invalid) return invalid;
      }
    });
  };
 }
}());

如果用户被禁用（503），我试图显示“用户帐户被禁用”，如果他们输入无效（400），我试图显示“电子邮件或密码无效”。单击登录按钮时会发生这种情况。

Answer 1

很难在不知道ng-messages的所需功能的情况下给出一个好的答案。

如果省略ng-messages：

<div ng-show="showDisabled">
  User Account is Disabled
</div>
<div ng-show="showInvalid">
  Invalid Email or Password
</div>

以下看起来不正确，因此暂时将其删除：

if (response = 503)
{
  $scope.disabled = $scope.loginForm.$disabled;
  if ($scope.invalid) return invalid;
}
if (response = 400)
{
  $scope.invalid = $scope.loginForm.$invalid;
  if ($scope.invalid) return invalid;
}

看起来似乎没有在任何地方使用返回值，它应该是response === x，而不是response = x。

替换为：

$scope.showDisabled = response === 503;
$scope.showInvalid = response === 400;

另外请注意，如果您需要访问以下表单：

ng-messages="loginForm.password.$error"

表单需要name：

<form name="loginForm">

而不是id：

<form id="loginForm">

显示错误消息取决于是否禁用了用户或使用JS / HTML输入是否无效

1 个答案: