Question

我正在使用datepair.js组件http://jonthornton.github.io/Datepair.js/，其中用户可以在一个字段中选择开始时间，第二个字段会自动填入组件js。我遇到了一个问题，其中由js填充的字段没有被angularjs提交。如果我手动输入字符，它会完美地提交字段数据。我想知道如何解决这个问题。

代码

<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.
      });
};

Answer 1

当您通过插件使用Javascript / jQuery设置值时，可能会触发与输入相关的更改事件。

您可以在提交表单之前使用一个处理触发这些内容的指令，例如：

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);
    }
  };
});

小提琴：http://jsfiddle.net/U3pVM/20042/

您可以看到，如果没有上述示例中的指令，则formData为空。

上面的代码我回答了类似的问题：Saved password in Firefox send empty fields

Angularjs没有发布由JS填充的字段数据

1 个答案: