Question

我在表单中使用Bootstrap角度datepicker来更新我的模型＆＃39; User＆＃39;。

我设置了这个日期选择器＆＃39;要求＆＃39;财产是真的。 UpdateUser.html：

<form name="userForm" novalidate>
    <div class="form-group">
        <label>Birthday</label>
        <p class="input-group">
            <input type="text" name="birthday" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="user.birthday" is-open="opened" datepicker-options="dateOptions" ng-required="true" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default"
                ng-click="openDate($event)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </p>
    <span>{{userForm.birthday.$invalid}}</span>
</div>
<div class="form-group">
    <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Update</button>
</div>
</form>

UserCtrl.js：

mainApp.controller("detailCtrl", function($scope, $http, $routeParams, DemoService) {        
  $scope.user = DemoService.get({userId : $routeParams.userId});
  $scope.openDate = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.opened = true;
  };
  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };
});

所以我的问题是：当我第一次设置＆＃39; user.birthday＆＃39;时，为什么{{userForm.birthday。$ invalid}}为真。到datepicker？

Plunker：

http://plnkr.co/edit/DkGEVJ?p=preview

Answer 1

这很奇怪，但将初始生日从'1403575208000'更改为new Date(1403575208000)可以解决此问题。

http://plnkr.co/edit/Wut4sJT5hFcG6EfSYe8t?p=preview

Answer 2

在angular-bootstrap Github论坛上有很多不同的问题看起来一样。

我使用的是angular-bootstrap版本0.13.0，我发现datepicker的值为：

userForm.$invalid = true

当日期字段为空和其他情况时，并不能正常工作。

当您想验证它时，会出现问题。在这种情况下，为了避免使用datepicker验证，我使用了以下代码：

<div class="form-group">
    <button type="submit" class="btn btn-primary" ng-disabled="userForm.$error['required'] !== undefined">Update</button>
</div>

这是我的plunkr

http://plnkr.co/edit/Sqog7OqudQkww9WsCUT2?p=preview

在那里你可以看到userForm。$ error的值，并决定在'生日'时使用ng-required = true或false。

希望它有所帮助！

bootstrap angular datepicker set ng-model $ invalid not change

2 个答案: