角度验证 NG 消息在提交和擦除文本后不显示必需

Angular Validation NG-message dont show required after submit and erase text

本文关键字：文本 显示 擦除 验证 NG 消息 提交      更新时间：2023-09-26

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

<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）在空搜索框上按回车键 ->显示正确的消息"字段为必填字段"

2）开始键入并擦除文本而不按回车键 ->再次显示错误消息

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

也许错误消息的字段名称不正确。无法说出您的不起作用的确切原因，因为您没有提供示例。但是，当我测试时，它工作正常。

 <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

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

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

相关文章：