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
Angular Validation NG-message dont show required after submit and erase text
提问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>
回答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');
}
回答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 语句来决定要验证的内容。例如,由于您不希望在一个人擦除字符时进行任何验证,您可以编写验证器以便它接受一个事件,然后您可以获得触发事件的键的字符代码,选择不验证该字符代码何时表示退格或删除。