ngMessages先给出错误，然后解决

ngMessages gives error first then resolves

本文关键字：然后 解决 错误 出错 ngMessages      更新时间：2023-09-26

我有一种情况，我认为我无法在代码笔上轻松再现，但我会尽可能切中要害，任何帮助或指导都将不胜感激。

这是表单摘录（我隐藏了类以使示例更简单/可读）

当文本框的值第一次更改时（当我第一次输入某个内容时），它会发出GroupsProfile.name.$error错误，导致类"has error"弹出。现在，如果我再次更改值（甚至更改为相同的文本），我会一切正常。

这与我尝试删除它们时的ng更改或ng单击无关，但仍然相同

  <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>

经过一点努力，我创建了一个笔

要检查问题，请装入笔，然后在字段中写信，然后移出。u将看到错误

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

您的问题是这一行：

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

具体地说，GroupsProfile.name.$error。除非$error为null，否则它的值将为true。

起初，$error包含｛required:true｝。当您开始键入时，它将替换为｛｝。｛｝不为null，因此它应用您的has-error类。

你想要的是：

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

这应该可以解决你的问题。

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

相关文章：