Question

我已将ngMessages包含在我的AngularJS应用程序中以进行某些表单验证。它非常有用，但是我遇到了一些我无法理解的东西。

我们说我在我的表单中有这个代码：testForm

<input type="text" name="test1" class="form-control" ng-model="test1" required>

<span class="help-block" ng-hide="testForm.test1.$error">Please enter the a test name</span>

<div ng-messages="testForm.test1.$error" ng-if="testForm.test1.$dirty">
    <div class="text-danger" ng-message="required">This field is required</div>
</div>

我希望在此文本框中出现错误时隐藏帮助程序消息除非用户尚未开始输入任何内容（在$dirty上）。

这怎么可能？使用上面的代码，我的testForm.test1.$error总是给我true值，即使它是空的，因此总是隐藏它。

我在这里缺少什么？

编辑：

我要澄清更多我想要实现的目标：

键入时，应显示帮助程序消息，并隐藏错误消息
当出现错误时，应隐藏帮助程序消息并显示错误消息
当尚未触及任何内容时，应显示帮助程序消息并隐藏错误消息

Answer 1

你试过ng-hide="testForm.test1.$error && testForm.test1.$dirty"吗？这样，当输入字段清洁（不脏）时，消息总是显示。

编辑：据我所知，当输入字段具有焦点时，您希望消息可见。

在您的控制器中，将hasFocus初始化为false：

$scope.hasFocus = false;

在您的HTML文件中：

<input type="text" name="test1" class="form-control" ng-model="test1" 
  ng-focus="hasFocus=true" ng-blur="hasFocus=false" required>

<span class="help-block" ng-hide="!hasFocus && testForm.test1.$error && testForm.test1.$dirty">Please enter the a test name</span>

<div ng-messages="testForm.test1.$error" ng-if="testForm.test1.$dirty">
    <div class="text-danger" ng-message="required">This field is required</div>
</div>

如果适合您，可以按以下方式替换ng-hide。当test1不为空且有错误时，它会隐藏消息。

ng-hide="!hasFocus && testForm.test1.$error && test1"

如何使用AngularJS在表单验证中隐藏/显示帮助器消息？

1 个答案: