javascript - 如何使用 ng-messages 在 Angularjs 中显示服务器错误

Question

我有我的 Angular 应用程序来验证注册表单。提交时，服务器还会验证数据。我使用 ng-messages 以 Angular 输出错误消息。

这是我的表单的简化版本，到目前为止效果很好。

<form name="signUpForm" novalidate data-ng-submit="attemptSignUp()">
    <label for="firstName">First name</label>
    <input type="email" name="email" id="email" required data-ng-model="data.user.email" />
    <div class="error" data-ng-messages="signUpForm.email.$error" data-ng-show="signUpForm.$submitted" data-ng-cloak>
        <p data-ng-message="required">Please provide your email</p>
    </div>
</form>

服务器验证电子邮件地址是否唯一，如果不是，则返回 422 错误(来自 Laravel 5)，并包含一系列错误。

[
    'email' => 'This email is already in use'
]

我想将此消息以及从服务器发回的任何其他消息合并到相关的 ng-messages block 中。知道我该如何实现它吗？

Answer 1

一个简单的解决方案是使用两个数组。一种用于客户端，另一种用于服务器端错误，这些错误填充在 Controller 中。如果存在客户端错误，您可以隐藏服务器端错误，或者相反，以避免重复消息。

我选择使用两个数组而不是填充 forms 数组的原因是 JavaScript Controller 不应该知道或依赖于 HTML 的结构。 HTML AngularJS 模板应该绑定(bind)到 Controller ，而不是相反。

<form name="signUpForm" novalidate data-ng-submit="attemptSignUp()">
    <label for="email">E-mail
        <input type="email" name="email" id="email" required data-ng-model="data.user.email" />
        <div class="error" data-ng-messages="signUpForm.email.$error" data-ng-show="signUpForm.$submitted" data-ng-cloak>
            <p data-ng-message="required">Please provide your email</p>
        </div>
        <div class="error" data-ng-messages="serverErrors" data-ng-show="signUpForm.$submitted" data-ng-cloak>
            <p data-ng-message="emailexists">Email already exists</p>
        </div>
    </label
</form>

标签上的注释:如果使用屏幕阅读器的用户未将错误消息包裹在标签内，则他们将无法大声朗读错误消息。