在angularjs中验证时如何添加复选标记和x？

Question

我在 angularjs 文档和网上都找不到关于表单验证这一特定方面的任何内容。您知道当有人在输入字段中输入内容（例如：姓名、电话号码、电子邮件等）时，会出现一个绿色复选标记吗？或者一个 X 似乎暗示它是错误的、不完整的等等。

所以，我的文件夹中有这些图像，可以在任何一种情况下使用。问题是，我找不到正确实现我想要实现的文档的文档。我认为 angularjs 将是使用的解决方案，因为我的其余代码是 angular。

由于这是 angularjs，唯一提供可行选项（由于某些原因不起作用）的帖子和文档是以下选项：

How to put an image in div with CSS?

https://docs.angularjs.org/tutorial/step_09

我正在考虑使用 CSS 来欺骗浏览器，使其在验证时显示一个或另一个图像。我认为这可能会迫使我的 other div 中的图像出现，但无济于事。

例如，在这个 CSS 中，我试过这样：

.ng-valid.ng-dirty .div.test{
    border-color: green;
    content:url(http://example.com/image);
    }

在我的 HTML 中使用它：

<div class="test">
               <label style="float:left">by:</label>
               <input class="form-control controltwo" required ng-model="reviewCtrl.review.author" name="email" id="email" type="email" style="width:350px;" placeholder="Email Address"/>

</div>

正如我之前所说，我正在尝试使用 angularjs 来实现一些目标。由于 CSS 可用于样式，它不能被欺骗为样式选项和复杂的验证器。我已经尝试了一些在链接上显示的技巧，但它们不起作用。至于第二个链接，它不是为此目的而制作的，并且考虑到它们仅用于过滤器和图像，过滤器的文档没有帮助。

Answer 1

实现您想要的一个简单方法是查看表单控件的 $valid 或 $invalid 属性。

例如，要在电子邮件无效时显示一条小消息，您可以将此元素放入您的标记中。

<div ng-show='reviewForm.email.$dirty && reviewForm.email.$invalid'>Invalid Email</div>

reviewForm 是表单的名称，email 是输入控件的名称。

这是一个证明这一点的 plunkr：http://plnkr.co/edit/tUuToy99xjfMhbyMd3eV

你可以用任何你想要的替换元素

Answer 2

您可以使用 ng-show、ng-src 和 ng-model 执行此操作，具体取决于您要验证的内容。

https://docs.angularjs.org/api/ng/directive/ngModel

https://docs.angularjs.org/api/ng/directive/ngShow

https://docs.angularjs.org/api/ng/directive/ngSrc

ng-model:text 下的示例几乎显示了您想要的内容。如果您不使用表单，您应该可以使用ng-change 触发检查并将图像更改为适当的图像。

https://docs.angularjs.org/api/ng/input/input%5Btext%5D

如果ng-show 监视相关字段的 $valid 属性，您可以在验证为假时隐藏复选标记，并在验证为真时显示它。如果你想要一个 X，你可以翻转逻辑。