Question

我正在使用bootstrap datepicker。当我点击图标日期＆amp;时间自动进入输入。但输入仍然无效，因为我没有直接与之互动。任何人都面临这个问题。

这是plnkr：http://plnkr.co/edit/yBmwZCCPvTOQWE6q3BW5

查看

<body data-ng-controller="ReservationController as resvnCtrl">
  <div class="container">
    <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-12 col-xs-12 ">
        <div>
            <h2 class="text-center page-heading">Make a reservation</h2>
        </div>
        <div>
            <form role="form" name="resvnCtrl.form" data-ng-submit="resvnCtrl.submitForm(resvnCtrl.form.$valid)" novalidate>
                <div class="form-group" data-ng-class="{'has-error':resvnCtrl.form.time.$invalid && (resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted) }">
                    <label class="control-label">Date-Time</label>
                    <div class='input-group date' id='datetimepicker'>
                        <input type="text" name="time" id="time" data-ng-model="resvnCtrl.reservation.time"
                               placeholder="Enter Desired Time" class="form-control" required>
                        <span class="input-group-addon pointer" data-date-picker>
                            <i class="fa fa-calendar"></i>
                        </span>
                    </div>
                    <div data-ng-messages="resvnCtrl.form.time.$error" data-ng-if="resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted">
                        <p class="help-block" data-ng-message="required">Date and Time required</p>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <input type="submit" name="submit" id="submit" value="Make Reservation" class="btn btn-primary btn-block " >
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>

控制器

var app = angular.module('plunker', []);

angular.module('plunker')
        .controller('ReservationController',ReservationController);

    ReservationController.$inject=['$scope'];
    function ReservationController($scope) {

         var resvnCtrl=this;
         resvnCtrl.reservation={};
         resvnCtrl.confirmation={};
         $('#datetimepicker').datetimepicker();

         resvnCtrl.submitForm=function(isValid){

              alert("valid:"+resvnCtrl.form.time.$valid);
         }
    }

Answer 1

我认为你可以参考角带：http://mgcrea.github.io/angular-strap/#/datepickers。将angular-strap.min.js，angular-strap.tpl.min.js和libs.min.css导入index.html时。你的app.js应该是这样的：

var app = angular.module('plunker', ['mgcrea.ngStrap.datepicker']);

Answer 2

这是jQuery中使用jQuery的诅咒。当插件初始化并且不触发摘要时，模型控制器仅更新$viewValue。摘要触发了我的另一个动作 - 聚焦于或运行摘要。

此解决方案是观察者，它将通过$modelValue方法手动设置$setViewValue()，以便角度知道发生的事情并更新验证。

请为datepicker创建单独的指令，该指令将在您使用指令的元素上初始化它。

Angular make input手动有效

2 个答案: