Question

我希望在表单上输入所需的电子邮件，并且我想增加输入标签以显示特定邮件的有效性。我尝试了下面的标记（简化和一些变体）。实际情况可以在this fiddle illustrating the problem找到。

<label for="email">Email
    <small class="help-inline" ng-show="form.email.$invalid-required"> (required)</small>
    <small class="help-inline" ng-show="form.email.$invalid-email"> (email)</small>
</label>
<div class="input-group">
    <input type="email" placeholder="Email" name="email"
        ng-model="model.email" required>

我喜欢＆＃39; required＆＃39;当输入为空时显示的消息，当它是非空的时，我喜欢电子邮件＆＃39;如果有角度的电子邮件验证通过，则会有条件地显示该消息。

正如您在小提琴中看到的那样，两条消息一起出现和消失，即使在我使用chrome检查器时，输入上的$invalid类似乎也会发生相应的变化。这会对错误的ng-show表达产生怀疑，但无论我在那里尝试什么，我都会得到相同的行为。

我已经看到了一些使用大量代码的答案（like this one），但这个答案似乎有些迂回曲折。我是网络新手，并且已经对html /代码的笨重感到震惊（每当我了解一个新的精简创意时，我的大小似乎都加倍了）

提前致谢。

Answer 1

将所需的表达式更改为

<label for="email">Email <small class="help-inline" ng-show="!form.email.$viewValue">

它会起作用。

Angular的问题在于它不允许模型中的无效数据。因此，除非您提供有效的电子邮件值，否则链接的模型属性将保持为空，并且必需和电子邮件验证都将失败。

Angular / bootstrap显示特定的表单验证消息

1 个答案: