Javascript 单击“登录”按钮时显示错误消息

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

任何帮助都将不胜感激

HTML

---

你需要一些东西

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

无效的电子邮件或密码

您还需要更正表单标记，放入angular ngModel所需的name属性：

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

我更改了代码以反映您的更改，但仍然没有得到我想要的结果。JS文件中的“loginForm”表示“未解析变量loginForm”。不知道为什么。另外，我对JS/HTML非常陌生，因此我可以利用我在这个问题上获得的所有帮助。对不起，我没有正确验证您的代码。您必须是一个name=“loginForm”才能为angular识别。它还影响ng消息测试。请更正此问题，然后重试。如果此答案正确，您也可以将其标记为正确以帮助其他人。：-）

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

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