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

Question

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

<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）开始键入和删除文本而不按Enter键 - >它再次显示错误信息

这是我不想要的第二个场景......任何想法？

Answer 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

Answer 2

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

Answer 3

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