Angular Validation NG-message don't show required after submit and erase text答案

【问题标题】：Angular Validation NG-message dont show required after submit and erase textAngular Validation NG-message don't show required after submit and erase text
【发布时间】：2014-12-05 14:46:34
【问题描述】：

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

<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) 在空搜索框上按 Enter -> 它显示正确的消息“必填字段”

2) 开始输入和擦除文本而不按回车 - > 它再次显示错误消息

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

【问题讨论】：

你为什么使用searchForm.searchQuery.$touched？这可能是你得到这种行为的原因。尝试只使用searchForm.$submitted
摆脱它并刚刚提交但行为相同......似乎在第一次提交后表单保持在“提交”状态，并且该错误消息只会在文本框为空时显示而是再次提交时
This post 可能会对您有所帮助。
还有一个小提琴演示会有所帮助。
我也认为，如果你用 $pristine 替换 ng-if 中的 $touched 部分。确保在提交表单后使用 $setPristine 设置表单。

标签： javascript angularjs validation

【解决方案1】：

可能您的错误消息字段名称不正确。由于您没有提供示例，因此无法说出您的不工作的确切原因。但是，当我测试时，它工作正常。

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

http://plnkr.co/edit/56koY7YxPDVFe4S26x9N?p=preview

【讨论】：

同样的事情发生在你的身上。因此，您在没有任何文本的情况下按 Enter 并显示输入消息，即“输入必填字段”然后只需输入一些内容并清除文本字段中的文本，错误消息将再次显示而无需输入提交
哦，你想只有在提交按钮被按下时才显示错误信息？然后，只需将ng-keypress="searchForm.$submitted=false" 添加到输入字段，尽管它不是最好的。我为此修改了plnkr。
仅在文本框为空且按下提交按钮时才显示消息
现在它似乎在任何提交时都会显示错误消息，即使有值
只需在 searchcode() 函数中注释掉 //$scope.field="";。对于高级按键控制，您可以考虑使用 ng-keyup。我必须告诉你，如果你一直问，你可以让它工作，但我不认为这是最好的。我认为最好的是when you want to show message based on submit, the message better to be from server-side，尽管您可能不同意。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我会以不同的方式做到这一点。希望能帮助到你。如果表单无效且脏，它将显示消息。当用户提交时，通过将表单设置为原始来重置表单。有了这个，您可以将 $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>

提交时，通过将表单设置为原始来重置表单。

$scope.searchcode = function() {
    $scope.searchForm.$setPristine();
    $scope.field="";
    console.log('submitted');
  }

http://plnkr.co/edit/m0cCmOAtY2J8fhSv0DVg?p=preview

【讨论】：