Question

我的HTML代码中定义了以下字段：

<label for="firstname" class="field prepend-icon"
      ng-class="{ 'state-error': submitted && helpForm.firstname.$error.required }">
   <input type="text" name="firstname" id="firstname" required=""data-ng-model="firstname"
        class="gui-input" placeholder="First name...">
   <label for="firstname" class="field-icon"><i class="fa fa-user"></i></label>
</label>
<span ng-show="{submitted && helpForm.firstname.$error.required}"
            class="state-error">Enter first name</span>

这是CSS类：

.smart-forms span.state-error {
   display: block !important;
   margin-top: 6px;
   padding: 0 3px;
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   line-height: normal;
   font-size: 0.85em;
   color: #DE888A;
}

验证的第一部分效果很好。也就是说，我可以添加类＆＃39;状态错误＆＃39;在验证错误时到标签。我正在使用条件：

ng-class="{ 'state-error': submitted && helpForm.firstname.$error.required }

它工作正常。

但是，我试图在＆＃39; ng-show＆＃39;中使用相同的条件。为了隐藏错误消息，直到有验证错误，但我无法隐藏它。这是负责它的代码行。

ng-show="{submitted && helpForm.firstname.$error.required}"

我也试过没有像这样的花括号：

ng-show="submitted && helpForm.firstname.$error.required"

在这两种情况下结果都是一样的。

所以相同的条件适用于添加一个类，但不能显示/隐藏元素，我缺少什么？

Answer 1

删除{}？

ng-show =“{已提交＆amp;＆amp; helpForm.firstname。$ error.required}

Answer 2

行。所以问题出在CSS类中。

我定义了：

display: block !important;

我删除了这一行，问题解决了。不确定，但我想ng-show使用

'display:none'

并且我的css课程覆盖了它。无论如何，它现在有效。因此，如果您遇到同样的问题，请务必检查您的CSS类。

使用Angular JS显示验证消息

2 个答案: