Javascript 角度验证NG消息在提交和删除文本后不显示

这是为我的表单设置的当前验证

<ng-messages for="searchForm.$error" ng-if="searchForm.$submitted">
  <ng-message when="required" class="error-message">This search field is required.</ng-message>
</ng-messages>

此搜索字段是必需的。

还有我的表格

<form role="form" ng-submit="searchForm.$valid && searchcode()" name="searchForm" novalidate>

它很好用

但我不喜欢这种情况

1） 在空搜索框中点击回车->它显示正确的消息“Field Is Required”

2） 开始键入并删除文本，但不按enter->再次显示错误消息

---

这是第二种情况，我不想……有什么想法吗？

可能错误消息的字段名不正确。 由于您没有提供示例，因此无法说出您的不起作用的确切原因。 然而，当我测试时，它运行良好

 <form ng-controller="MyCtrl" role="form" name="searchForm" novalidate
    ng-submit="searchcode()">
    <input type="text" ng-model="field" name="myField" 
      ng-keypress="searchForm.$submitted=false"
      required minlength="5" />
    <ng-messages ng-if="searchForm.$submitted"
      for="searchForm.myField.$error">
      <ng-message when="required" class="error-message">
        This search field is required.
      </ng-message>
    </ng-messages>
  </form>

此搜索字段是必需的。

---

我会用不同的方式来做。希望能有帮助。如果表单无效且不干净，它将显示消息。当用户提交时，通过将表单设置为原始来重置表单。使用此选项，您可以将$scope.field重置为空，并且不显示错误消息

<form ng-controller="MyCtrl" role="form" name="searchForm" novalidate ng-submit="searchcode()">
   <input type="text" ng-model="field" name="myField" required minlength="5" />
   <p class="error-message" ng-show="!searchForm.$valid && searchForm.$dirty">
     This search field is required.
   </p> 
   <ul>
      <li>$submitted : {{searchForm.$submitted}}
      <li>$valid: {{searchForm.$valid}}
      <li>$dirty:  {{searchForm.$dirty}} 
   </ul>
</form>

---

您可以编写自己的自定义验证器，然后使用if语句决定要验证的内容。例如，由于您不希望在某人擦除字符时进行任何验证，因此您可以编写验证程序，以便它接受一个事件，然后您可以获取触发该事件的密钥的字符代码，当字符代码表示退格或删除时，选择不验证。

为什么要使用

searchForm.searchQuery.$toucted

？这可能就是你有这种行为的原因。尝试使用just

searchForm.$submitted

摆脱了它，只是提交了，但行为相同…似乎在第一次提交后表单仍处于“submitted”状态，并且每当文本框为空时就会显示错误消息，而在再次提交时可能会对您有所帮助。另外，小提琴演示也会有所帮助。我还认为，如果用$pristine替换ng if中的$toucted部分。提交表单后，请确保将表单设置为$setPristine。同样的情况也会发生在您的表单上。因此，您在没有任何文本的情况下点击回车，回车消息显示，即“输入必填字段”，然后只需键入一些内容并清除文本字段中的文本，错误消息将在没有输入Submito的情况下再次显示。您只想在按下submit按钮时显示错误消息吗？然后，只需将

ng keypress=“searchForm.$submitted=false”

添加到输入字段，尽管这不是最好的。为此，我修改了

plnkr

。仅当文本框为空且按了提交按钮时才显示消息。现在，即使有值，也似乎会在任何提交时显示错误消息，只需注释掉

/$scope.field=“”。对于高级按键控制，您可以使用ng keyup。我必须告诉你，如果你一直要求，你可以让它工作，但我不认为这是最好的。我认为最好的方法是
当您希望基于提交显示消息时，最好是来自服务器端的消息
，尽管您可能不同意。
$scope.searchcode = function() {
    $scope.searchForm.$setPristine();
    $scope.field="";
    console.log('submitted');
  }