Question

我有一个包含多个字段的表单，包括几个日期选择器（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>

我正在使用表格的角度验证。我们有一些必填字段，但日期不是。如果输入日期并将其删除，则表示表单无效。我创建了一个Plunkr来证明这一点。

有解决方法吗？

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

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

Answer 1

在当前版本的代码中，有一个$datepickerSuppressError值可以设置为true，这将隐藏控制台错误。 You can see in the code它检查日期是否为NaN，然后在$datepickerSuppressError仍为false时显示控制台错误。

然而，话虽如此，仍然有办法解决表格无效的问题。您只需添加一个额外的检查，以查看是否设置了mainForm.$error.date，或类似的内容。

例如，您可以更改按钮以改为：

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

即使指令在日期设置了错误，也会启用按钮，如果其他任何字段无效，则应禁用该按钮。

如何使Angular UI Datepicker不需要

1 个答案: