單擊登錄按鈕時顯示錯誤消息

Question

如果用戶嘗試登錄並且具有無效的電子郵件或密碼，我想顯示一條錯誤消息。我想在密碼輸入容器下顯示此錯誤。我想用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; 
     } 
    }); 
    }; 
} 
}()); 

Answer 1

你需要一些東西...在submitlogin

，你需要測試和揭露，如果你的表格無效：

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

然後，一個牛逼的HTML，可以防止與NG秀月初的消息：

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

你需要太糾正表單標籤，把名字屬性，角ngModel要求：

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