AngularJs cannot see updated value of input and setting ng-invalid

Question

Datepicker gets date and puts it into input field. Input marked as required but AngularJS cannot see changes and mark it as valid. Why?

HTML

<div class="form-group" ng-class="{ 'has-error': myForm.inputDatetimeStart.$invalid }">
    <label for="datetimepicker_start" class="col-sm-3 control-label">Start date and time: </label>
    <div class="col-sm-8">
        <input class="form-control" name="inputDatetimeStart" ng-model="datetime_start" id="datetimepicker_start" type="text" required>
    </div>
</div>

JS

 angular.module('myApp', ['ajoslin.promise-tracker', 'ngRoute'])
     .controller('myCtrl', function ($scope, $http, $log, promiseTracker, $timeout){
       jQuery('#datetimepicker_start').datetimepicker({   });
       ...

     }

Because what the jQuery datepicker is doing when it updates the input box is not "seen" by Angular. If you want it to work correctly, you should create a directive that wraps the jQuery datetimepicker functionality and then sends the proper events and/or scope $applys when the jQuery datepicker library does something — JoseM
– JoseM, Commented Sep 23, 2014 at 13:08

Michel Tomé · Accepted Answer · 2014-09-23 14:25:07Z

1

Try to use

$scope.$watch('datetime_start', function () { 
    $scope.$apply();
})

it will make a digest cycle occur.

answered Sep 23, 2014 at 14:25

Michel Tomé

3892 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs cannot see updated value of input and setting ng-invalid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related