仔细了解Angular的ngMessages模块

本文由Marc Towler和Stephan Max进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

由于ngMessages模块具有帮助开发人员在构建表单时ngMessages更好的用户体验的能力，因此成为Angular 1.3发行版中的核心指令。 一年后，Angular团队继续开发此模块，以确保它为开发人员提供了使用模板显示错误消息，向错误消息添加动画等功能。 8月下旬，我发表了一篇有关使用ngMessages模块执行基本表单验证的文章 。 该文章介绍了此模块的工作原理，而本文旨在探讨ngMessages授予我们访问权限的一些不同功能。

ngMessages模块

当添加到Angular应用程序中时，ngMessages API会向用户授予以下用于控制错误消息的指令：

• ngMessages
• ngMessage
• ngMessagesInclude
• ngMessageExp

在整篇文章中，我们将研究这些指令中的每一个，以便对它们如何工作以及为什么有用有一个牢固的了解。

ng-message和ng-messages的基础

让我们看一下ng-message和ng-messages指令在显示错误消息中的作用。

见笔ngMessages例1由SitePoint（ @SitePoint上） CodePen 。

在上方，我们看到了一些用于验证基本textarea html元素的代码。 为了使ngMessages正常工作，它依赖于ng-model的$error对象来告诉应用程序输入是否通过验证。 一旦用户单击该框， ngMessages将相应地呈现错误字段。 在上面的示例中， ng-model存在于名称为userInput的input标签内。 结果， ng-messages知道要查找有关我们输入字段的信息。 在此示例中， ng-messages将根据ng-minlength ， ng-maxlength和required属性呈现消息。 重要的是要注意，Angular将按照它们在我们的html中出现的顺序显示这些错误消息。

关于将ngMessages与ngIf一起使用的快速说明

为了隐藏这些错误消息以使其不会自动显示，我们可以使用ngIf 。 使用时， ng-if指令会根据不同情况删除或重新创建DOM的一部分。

通过检查下面的示例，我们看到代码类似于第一个示例，但是ng-if已附加到我们的父ng-messages div中。 在此ng-if语句内，我们可以传入$dirty的值以在用户与输入字段进行交互时显示错误消息。 话虽如此，我们在键入下面的text-area可以看到错误消息正在渲染，这全都归功于ng-if指令。

见笔ngMessages例2由SitePoint（ @SitePoint上） CodePen 。

ngMessagesInclude

Angular团队非常重视允许开发人员构建可维护的模块化Web应用程序。 他们希望您将代码尽可能保持DRY，这在使用ngMessagesInclude指令时非常明显。 在Angular应用程序中实现时， ng-messages-include指令允许开发人员重新使用自定义消息模板。 最初， ngMessagesInclude用作父ng-messages指令的补充属性，但是在1.4版本中对此进行了更改。 现在， ngMessagesInclude是它自己的指令，可以用作ng-messages指令的子代，就像我们在第一个示例中看到的ng-message指令一样。

重用模板

在下面，我们看到一个示例，该示例如何允许我们显示许多错误消息。 不必写出多个子ng-message指令， ng-messages-include允许我们使用一行代码传递消息模板。 为此，我们要做的就是将此消息模板的ID传递到此伪指令中，以使其起作用。

请参阅CodePen上的SitePoint（ @SitePoint ）的Pen ngMessagesInclude 。

覆盖错误消息

ng-messages-include指令也可以与ng-message结合使用，以提供针对错误消息的细微调整的解决方案。 在下面的示例中，我们看到这两个指令都存在。 如果我们与表单进行交互，则会看到ng-message被用来覆盖message-template内部定义的minlength消息。

见笔ngMessages覆盖实施例由SitePoint（ @SitePoint上） CodePen 。

因此，开发人员在面对可能需要修改给定字段的错误消息输出的情况时，不必担心会遇到问题。 在上面的示例中， minlength消息的形状更多地围绕问题，这显示了一个如何帮助的实例。 另外，需要注意的重要是ng-message和ng-messages-include的顺序。 如果未先定义ng-message ，它将不会覆盖模板内的消息。

ngMessagesExp

接下来，让我们看一下Angular 1.4中发布的ng-messages-exp指令。 当在ng-messages容器内实现时，开发人员可以使用此伪指令通过表达式动态显示错误消息。 这非常强大，因为它允许开发人员根据服务器的响应来异步执行诸如显示消息之类的事情。 但是，出于本教程的考虑，我们将要看的示例将严格处理客户端代码。

请参阅CodePen上的SitePoint（ @SitePoint ）的Pen ngMessagesExp 。

在上面的示例中，我们看到的text-area与到目前为止所看到的示例极为相似，但是html代码有所不同。 本示例将ng-repeat与ng-message-exp以显示根据输入值使用$scope.messages设置的错误消息。 通过查看此示例，我们看到ng-repeat被用来遍历传递到messages属性中的数据。 现在，当用户填写表单时， ng-messages-exp将遍历此属性以匹配正确的表达式，并显示其描述。 如果我们看一下代码内部，就会发现minlength和maxlength都已传递到messages属性的第二个对象中。 结果， ng-messages-exp将知道评估这两个值，并动态显示此错误消息。 尽管这是非常基本的，但它显示了ng-message-exp的使用为开发人员打开了多少扇门，因为它将为我们执行逻辑，并提供了可靠的示例说明此指令工具的功能。

最后的话

从而结束了我有关ngMessages文章，以及它对Angular应用程序的开发产生的重大影响。 如果可以肯定的是， ngMessages将继续在Angular框架中发挥巨大作用，所以我衷心希望您对这项技术的工作有所了解。 与往常一样，如果您有任何疑问，请随时与我们联系，因为我很乐意为您提供任何帮助！

From: https://www.sitepoint.com/closer-look-angulars-ngmessages-module/