Angular - 在用户编辑字段后触发 onBlur 消息
Angular - Firing message onBlur after user edits field
和其他人一样,我一直在寻找一种好方法来使用 Angular 验证我的表单,同时又不会让消息过于激进。我得到的最接近的是在触发消息之前检查 $dirty 和 $touched。适用于大多数情况。
我无法弄清楚的一种情况是当用户编辑时,例如,必填字段。该字段中有文本、有效、脏和已触及。用户返回现场进行更改。他们退格输入中的内容,并立即触发消息,因为输入现在变脏、已触及且无效。我宁愿在那个时候 "reset" 并在用户再次模糊输入时重新评估。让他们有机会在输入仍然集中的时候填写输入内容。
有道理吗?有什么想法吗?
谢谢!
马特
也许这行得通:
ng-model-options="{ updateOn: 'blur' }"
将其添加到您的 input
元素中。我相信验证会在模型更新时进行,这样模型就会在模糊时得到更新。
在这里您可以看到该指令的更多选项:https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions。
让我知道它是否有效:)
使用 ng-blur 上的函数来验证并在无效时显示消息。
ng-blur="validate()"
在你的控制器中 -
$scope.validate = function(){
//Validate logic
//If invalid
//Show message logic here
}
查看 ngMessages 文档:
https://docs.angularjs.org/api/ngMessages/directive/ngMessages
你有一个例子告诉你如何使用它:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
我认为这是最好的方法(至少我是这样做的)。
和其他人一样,我一直在寻找一种好方法来使用 Angular 验证我的表单,同时又不会让消息过于激进。我得到的最接近的是在触发消息之前检查 $dirty 和 $touched。适用于大多数情况。
我无法弄清楚的一种情况是当用户编辑时,例如,必填字段。该字段中有文本、有效、脏和已触及。用户返回现场进行更改。他们退格输入中的内容,并立即触发消息,因为输入现在变脏、已触及且无效。我宁愿在那个时候 "reset" 并在用户再次模糊输入时重新评估。让他们有机会在输入仍然集中的时候填写输入内容。
有道理吗?有什么想法吗?
谢谢! 马特
也许这行得通:
ng-model-options="{ updateOn: 'blur' }"
将其添加到您的 input
元素中。我相信验证会在模型更新时进行,这样模型就会在模糊时得到更新。
在这里您可以看到该指令的更多选项:https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions。
让我知道它是否有效:)
使用 ng-blur 上的函数来验证并在无效时显示消息。
ng-blur="validate()"
在你的控制器中 -
$scope.validate = function(){
//Validate logic
//If invalid
//Show message logic here
}
查看 ngMessages 文档: https://docs.angularjs.org/api/ngMessages/directive/ngMessages
你有一个例子告诉你如何使用它:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
我认为这是最好的方法(至少我是这样做的)。