如何显示Angularjs与NG-邮件服务器的错误 [英] How to display server errors in Angularjs with ng-messages

问题描述

我有我的应用程序的角度在验证注册表单。在提交时，服务器还会验证数据。我使用的是NG的消息在角输出错误信息。

I have have my angular app validating a sign-up form. On submit, the server also validates the data. I'm outputting error messages in angular using ng-messages.

下面是我的形式，它完美的作品至今的精简版本。

Here is a shortened version of my form, which works perfectly so far.

<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），有错误的数组。

The server verifies the email address is unique, and if not, returns a 422 error (from Laravel 5), with an array of errors.

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

我想在这个合并，以及任何其他消息发送回从服务器到其相关的 NG的消息块。任何想法，我怎么能做到呢？

I'd like to merge in this, and any other messages sent back from the server into their relevant ng-messages block. Any idea how I could accomplish it?

推荐答案

一个简单的解决方案是有两个数组。一个用于客户端，一个是这是在您的控制器填充服务器端错误。如果客户端错误存在，或者opposit避免双重信息可以隐藏在服务器端错误。

A simple solution is to have two arrays. One for client side and one for server side errors which is populated in your controller. You can hide the server side errors if client errors exists or opposit to avoid double messages.

我选择有两个阵列，而不是填充形式排列的原因是JavaScript控制器不应该知道或依赖于HTML的结构。在HTML AngularJS模板应绑定到控制器，不opposit

The reason I choose to have two arrays instead of populating the forms array is that the JavaScript controller should not know or be dependent on the structure of the HTML. The HTML AngularJS template should be bound to the controller, not opposit.

<form name="signUpForm" novalidate data-ng-submit="attemptSignUp()">
    <label for="firstName">First name>
        <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>

标签上的注意事项：使用屏幕阅读器不会得到你的错误消息朗读给他们，如果他们没有在标签内包裹的用户

A note on the label: Users using screen-readers will not get your error messages read out loud to them if they are not wrapped inside the label.

这篇关于如何显示Angularjs与NG-邮件服务器的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！