Angularjs not posting field data populated by JS

Question

I'm using the datepair.js component, http://jonthornton.github.io/Datepair.js/ where the user can select a start time in one field and the second field is automatically filled in with the components js. I'm running into an issue where the field populated by js is not being submitted by angularjs. If I manually type in the characters, it's submits the field data perfectly. I'm wondering how to fix this.

Code

<form method="post">
    <g:select class="form-control" required="true" name="requestType" ng-model="leaveRequest.requestType" from="${requestTypes}" optionKey="id"  optionValue="name"/>

    <p id="basicExample">

        <input type="text" class="date start" required="true" ng-model="leaveRequest.startDate"/>
        <input type="text" class="time start" required="true" ng-model="leaveRequest.startTime"/> to
        <input type="text" class="time end" required="true" ng-model="leaveRequest.endTime"/>
        <input type="text" class="date end" required="true" ng-model="leaveRequest.endDate"/>
    </p>

    <button ng:click="addEvent()">Add Event</button>
</form>

Javascript

$scope.events = [];

$scope.addEvent = function() {
    $http.post('./calendar/save.json', $scope.leaveRequest)
        .then(function(response) {
            $scope.events.push(response.data);
      }, function(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });
};

score 1 · Accepted Answer · edited May 23 '17 at 12:03

It will probably be something relating to the input's change event is not triggered when the value is being set with Javascript/jQuery by you plugin.

You could use a directive that handles triggering these for you before your form is submitted, e.g:

app.directive('formAutoFillFix', function() {
  return function(scope, elem, attrs) {

    elem.prop('method', 'POST');

    // Fix autofill issues where Angular doesn't know about autofilled inputs
    if(attrs.ngSubmit) {
      setTimeout(function() {
        elem.unbind('submit').bind('submit', function(e) {
          e.preventDefault();

          angular.forEach(elem.find('input'), function(el){
             el.dispatchEvent(new Event('input'));
          });

          scope.$apply(attrs.ngSubmit);
        });
      }, 0);
    }
  };
});

Fiddle: http://jsfiddle.net/U3pVM/20042/

You can see that without the directive in the above example formData is empty.

The above code I answered a similar question with: Saved password in Firefox send empty fields

That's what I was thinking the issue was, but didn't know how to fix it. I added our code and I'm getting the following error. TypeError: elem.find(...).triggerHandler(...) is undefined — Code Junkie, Nov 10 '15 at 16:33
triggerHandler is a jQuery function. I've updated my answer with a version that does not depend on jQuery, instead use dispatchEvent(). — StuR, Nov 10 '15 at 17:41
I ended up fixing the problem with the following code. elem.find('input').trigger('input'); — Code Junkie, Nov 10 '15 at 18:27

Angularjs not posting field data populated by JS

1 Answers1