Question

我有一种情况，我不认为我可以轻松地在codepen上重现，但我会尽可能地确保这一点，并且感谢任何帮助或方向。

这是摘录的形式（我隐藏了类以保持示例更简单/可读）

当第一次更改文本框的值时（当我第一次输入内容时），它会发出GroupsProfile.name.$error错误，导致类＆＃34; has-error＆＃34;弹出来。现在，如果我再次更改该值（即使是相同的文本），我也可以。

这与ng-change或ng-click无关，因为我尝试删除它们但仍然相同。

  <div class="{{(GroupsProfile.name.$error && GroupsProfile.name.$touched) ? ' has-error ' : ''}}">
    <input type="text" ng-model="grp.name" name="name" required ng-change="check_grp()"/>
    <div ng-messages="GroupsProfile.name.$error" ng-if="GroupsProfile.name.$touched">
      <div ng-message="required">Group Name is required.</div>
    </div>
  </div>

通过一点努力，我创建了一个pen

检查问题是否加载笔然后在字段中写入字母，然后移出。你会看到错误

重现您必须重新加载页面的错误

Answer 1

你的问题就在这一行：

<div class="{{(GroupsProfile.name.$error && GroupsProfile.name.$touched) ? ' has-error ' : ''}}">

具体来说，是GroupsProfile.name。$ error。除非$ error为null，否则这将评估为真。

首先，$ error包含{required：true}。当您开始输入时，将替换为{}。 {}不为null，因此它应用了has-error类。

你想要的是：

<div class="{{(GroupsProfile.name.$error.required && GroupsProfile.name.$touched) ? ' has-error ' : ''}}">

这可以解决您的问题。

此外，您应该使用ng-class指令。

ngMessages首先给出错误然后解决

1 个答案: