Отображать сообщение об ошибке при нажатии кнопки входа в систему

Question

Я хочу отобразить сообщение об ошибке, если пользователь пытается войти в систему и имеет недействительный адрес электронной почты или пароль. Я хочу отобразить эту ошибку в контейнере ввода пароля. И я хочу использовать тот же стиль в разделе «errors», используя 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, можно предотвратить, чтобы показать сообщение с ранними нг-шоу:

<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">