javascript - 单击登录按钮时显示错误消息

如果用户尝试登录并且电子邮件或密码无效，我想显示一条错误消息。我想在密码输入容器下显示此错误。我想使用Angular使用与“错误”部分相同的样式。可以在这里看到

https://material.angularjs.org/latest/demo/input

任何帮助将不胜感激。

的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>
      </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.username.$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

(function () {
 'use strict';

  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');
      } else {
        $scope.dataLoading = false;
      }
    });
  };
 }
}());

最佳答案

你需要一些东西

在Submitlogin上，您需要测试并公开表单是否无效：

$scope.submitLogin = function() {
    $scope.invalid = $scope.loginForm.$invalid;
    if($scope.invalid) return;
    ...

然后，在html处，您可以防止通过ng-show提前显示该消息：

<div ng-show="invalid" ng-messages="loginForm.username.$error" role="alert">
    <div ng-message="required">Invalid Email or Password</div>
</div>

您还需要更正form标记，并放置angular ngModel所需的name属性：

<form id="loginForm" name="loginForm">

关于javascript - 单击登录按钮时显示错误消息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34277571/