首先,我认为这与日期选择器没有真正的联系,如果我理解你的问题,你正在尝试根据导致表单 $invalid 的错误显示不同的消息
如果是这种情况,您提供的代码只会在日期无效时显示一条消息(但这只是因为您评论了模式的部分;))
我在测试时非常懒,所以我没有使用日期选择器,你必须手动输入日期,但我做了这个小提琴:http://jsfiddle.net/DotDotDot/ELf5A/2/ http://jsfiddle.net/DotDotDot/ELf5A/2/
由于我不知道您在什么上下文中使用它,因此我使用了不同的方法来显示验证错误消息
HTML 部分很简单。有一个表单,需要两个字段,一个包含日期的模式检查,另一个仅用于所需的验证。我为日期添加了 2 条错误消息,一条在未触摸表单时显示,告诉您所需的格式,另一条仅在模式错误时显示。
您可以单击该按钮来检查整个验证,然后显示另一条消息,该消息将告诉您表单是否有效,如果无效,则是否是由于日期模式所致。
<div ng-controller='theCtrl'>
<form name='theForm'>
Enter something here : <input type='text' ng-model='someField' name='someField' required /> <br/>
Enter a date here : <input type='text' ng-model='theDate' name='theDate' ng-pattern='datePattern' required />
<span ng-show='theForm.theDate.$error.pattern'>Your date format is invalid, please check it again</span>
<span ng-show='theForm.theDate.$pristine'>Enter a valid date here : DD/MM/YYYY</span>
<br/> <input type='button' ng-click='validation(theForm)' value='Try to validate me!' />
<br /> {{errorMsg}}
</form>
</div>
JS部分也不是很复杂。当您单击按钮时,表单将被发送到验证函数,该函数实际上会执行您想要的所有检查,我只执行了与模式相对应的一项,但您完全可以检查您想要的验证功能
$scope.validation=function(aForm){
//console.log(aForm)
if(aForm.theDate.$error.pattern)
$scope.errorMsg='The pattern you entered isn\'t good enough, try again !'
else{
if(aForm.$invalid)
$scope.errorMsg='Something is invalid, please check all the fields !'
else//valid
{
$scope.errorMsg='Not bad !'
alert("good job !")
//maybe you can also submit this form here ;)
}
}
}
这个验证函数完全可以用作 ng-show/ng-hide 中的触发器,这就是为什么我还添加了另一个函数:
$scope.whatToDisplay=function(aForm){
if(aForm.$valid)
return 'valid';
if(aForm.theDate.$error.pattern)
return 'date';
if (aForm.$invalid)
return 'notdate';
}
这将返回一个与验证期间发生的情况相对应的字符串,该字符串将由 ng-show 处理:
<span ng-show='whatToDisplay(theForm)=="date"'>Displayed if the date is wrong</span>
<span ng-show='whatToDisplay(theForm)=="notdate"'>This is displayed if the form is invalid, but not because of the date format</span>
<span ng-show='whatToDisplay(theForm)=="valid"'>Displayed if the form is valid</span>
总结一下,您可以使用 4 种不同的方法
通过点击触发的验证函数(对于提交按钮有用),对应于我的小提琴中的validation()函数
与某些 ng-show 关联的函数,它将自动监视每个更改,例如 WhatToDisplay() 函数
ng-show 仅与表单属性关联,就像您对代码所做的那样
该类自动应用于表单(我没有解释它,但您可以在小提琴中看到它,如果模式错误或仅无效,则边框会发生变化)
抱歉,我在写这篇文章时遇到了一些困难,我让你玩一下代码,这样更容易理解,我希望这对你有帮助