5

我能够验证我的 AngularStrap datetimepicker，但我无法区分所需的验证失败和无效的日期失败。屏幕上显示的唯一错误是必需的错误，无论是必需的还是无效的字符串。如果输入的字符串无效，是否可以显示不同的验证消息？这是我的代码：

<div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
    <label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label>
    <div class="controls">
        <input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required>
        <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>
        <!--<span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.pattern">{{'_BirthDateInvalid_' | i18n}}</span>-->
    </div>
</div>

我想要的是类似于 ng-pattern 检查但特定于 datetimepicker 的东西。

4

3 回答 3

9

首先，我认为这与日期选择器没有真正的联系，如果我理解你的问题，你正试图根据导致表单 $invalid 的错误显示不同的消息

如果是这种情况，您提供的代码只会在日期无效时显示一条消息（但只是因为您评论了该模式的部分；））

我在测试时超级懒惰，所以我没有使用日期选择器，你必须手动输入日期，但我做了这个小提琴：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 仅与表单属性相关联，就像您对代码所做的那样

  • 该类自动应用于表单（我没有解释它，但你可以在小提琴中看到它，如果模式错误或者它只是无效，边框会改变）

抱歉，我写的有点困难，我让你玩代码，这样更容易理解，希望对你有帮助

于 2013-07-27T14:54:15.040 回答
2

您应该在 AngularJS 1.3 中使用 ngMessages 以更少的代码和复杂性来发送错误消息。该bs-angular指令为您的消息列表中的“日期”字符串值创建一条ng-message消息。

<div class="control-group" ng-class="{error: form.BirthDate.$invalid}">
    <label class="control-label" for="BirthDate">
         {{'_BirthDate_' | i18n}}
    </label>
    <div class="controls">
        <input id="BirthDate" name="BirthDate" title="BirthDate" type="text"
          ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" 
          bs-datepicker required>
        <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>            
    </div>
    <div class='alert alert-danger' ng-messages='myForm.BirthDate.$error' 
            ng-if='!myForm.BirthDate.$valid'>
      <div ng-message="date">Please enter a valid date</div>
      <div ng-message="required">Birthdate is required</div>
    </div> 
</div>
于 2015-08-10T21:05:16.413 回答
0

此代码有助于显示无效的日期时间错误消息

$scope.date=='Invalid Date'
{
   err('Your error message');
}
于 2015-06-09T06:30:40.900 回答