4

我有一个包含许多字段的表单，包括几个日期选择器（Angular UI Bootstrap）。

<div name="mainForm" ng-form>
    <div class="form-group">
        <p class="input-group">
            <input type="text" name="dt" 
                   class="form-control"
                   ng-model="dt"
                   is-open="opened" 
                   datepicker-popup="MM/dd/yyyy" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>
    <p class="text-danger" ng-show="mainForm.$invalid">Invalid!</p>
</div>

我正在使用带有表单的 Angular 验证。我们有一些必填字段，但日期不是。如果您输入日期并将其删除，则会将表单标记为无效。我创建了一个Plunkr来演示这一点。

有没有解决的办法？

注意：当您清除日期时，它还会在控制台中记录此错误。

Datepicker 指令：“ng-model”值必须是 Date 对象、自 01.01.1970 以来的毫秒数或表示 RFC2822 或 ISO 8601 日期的字符串。

4

1 回答 1

0

在当前版本的代码中，有一个$datepickerSuppressError值可以设置为 true，这将隐藏控制台错误。您可以在代码中看到它检查日期是否为 NaN，如果$datepickerSuppressError仍然为 false，则显示控制台错误。

但是，话虽如此，仍然有一种方法可以解决表单无效的问题。您只需要添加一个额外的检查来查看是否mainForm.$error.date设置了，或者类似的东西。

例如，您可以将按钮更改为具有此功能：

ng-disabled="mainForm.$invalid && !mainForm.$error.date"

即使指令在日期上设置了错误，这将使您的按钮保持启用状态，并且如果任何其他字段无效，它应该禁用。

于 2015-06-26T15:30:46.823 回答