角度使输入手动有效

Angular make input valid manually

本文关键字：有效 输入      更新时间：2023-09-26

我使用的是引导日期选择器。当我点击图标date&时间自动输入。但是输入仍然是无效的，因为我没有直接与它交互。有人面临过这个问题吗。

这是它的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);
         }
    }

我想你可以参考角带：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']);

这是在angular中使用jQuery的诅咒。当插件初始化时，模型控制器只更新$viewValue，这不会触发摘要。摘要触发了我的另一个动作——专注于运行摘要。

解决方案是观察者通过$setViewValue()方法手动设置$modelValue，这样angular就会知道发生了什么并更新验证。

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

相关文章：