javascript 提交和擦除文本后不需要显示 Angular 验证 NG 消息

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27318420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 07:19:39  来源:igfitidea点击:

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

javascriptangularjsvalidation

提问by StevieB

This is my current validation set up for my form

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

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

and my form

还有我的表格

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

It works fine.

它工作正常。

But here is what I don't like this scenario

但这是我不喜欢这种情况的地方

1) Hit Enter on empty searchbox - > it shows the correct message "Field Is Required"

1) 在空搜索框上按 Enter - > 它显示正确的消息“需要字段”

2) Start Typing and Erase Text without hitting enter - > it shows error message again

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

It's the second scenario I dont want...any ideas ?

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

采纳答案by allenhwkim

Maybe your field name for the error message is not right. Cannot tell the exact reason why yours not work because you did not provide an example. However, when I tested, it works fine.

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

 <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

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

回答by geckob

I will do this in different way. Hope it helps. It will show the messages if the form is not valid and dirty. When the user submits, reset the form by setting it to be pristine. With this, you can reset you $scope.field to empty and not showing error messages.

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

On submit, reset the form by setting it to be pristine.

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

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

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

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

回答by RadleyMith

You could write your own custom validator, and then use an if statement to decide what to validate. Since for instance you don't want there to be any validation done when a person is erasing characters, you could write the validator so that it takes an event and then you can get the char code of the key that fired the event, opting not to validate when that char code represents either backspace or delete.

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