如果用户尝试登录并且电子邮件或密码无效,我想显示错误消息。我想在密码输入容器下显示此错误。我想使用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;
}
});
};
}
}());
答案 0 :(得分:3)
你需要一些东西......
在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>
您还需要更正表单标记,添加角度ngModel所需的name属性:
<form id="loginForm" name="loginForm">