javascript - 使用 angularjs : Input textbox gives TypeError: Cannot set property '0' of undefined 在 restful API 上通过 POST 提交网络表单

Question

我正在尝试通过我的 Angular 代码在我的 Drupal 7 网站上提交一个网络表单。我正在做的是将 Drupal 7 作为后端，将应用程序(通过 ionic + Angular)作为前端。

当我尝试提交表单时发生了什么，并且出于某种原因每当我尝试在我的文本框中输入时，它都会给我:-

TypeError: Cannot set property '0' of undefined
    at extend.assign (angular.js:10626)
    at $setViewValue (angular.js:17502)
    at angular.js:16818
    at Scope.$eval (angular.js:12518)
    at Scope.$apply (angular.js:12616)
    at HTMLInputElement.listener (angular.js:16817)
    at HTMLInputElement.x.event.dispatch (jquery-1.10.min.js:5)
    at HTMLInputElement.v.handle (jquery-1.10.min.js:5)

这是我如何将数据发送到 Drupal 7 站点以提交网络表单的完整代码。

文本框在这里有完整的形式:-

<form ng-submit="submit('1234wewewdsd')" ng-controller="formCtrl" method="POST">
          <label>Your name:</label><br/>
          <input type="text" ng-model="formData[1]['values'][0]" value="Fahad" /><br/>
           <label>Your detail:</label><br/>
          <input type="text" ng-model="formData[2]['values'][0]" value="DEtails" /><br/>
          <input type="submit" value="Send" />
        </form>

我的 Angular 代码如下:-

app.js

.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
])

services.js

    .factory('formService', function($http){
    return {
        postForm: function(uuid, $scope){
          var toPost = {
            webform: uuid,
            submission: {
                data: $scope.formData
            }
          };
          console.log(toPost);
          console.log(JSON.stringify(toPost));
          return $http.post('http://localhost:8888/mysite/api/submission', toPost);
        }
    };
})

controller.js

.controller('formCtrl', function($scope, $element, formService) {
    $scope.submit = function(uuid){
      formService.postForm(uuid, this);
    };
})

正确的 URL 参数需要随响应一起发送

Answer 1

您应该在 Controller 中定义 $scope.formData，如下所示:

$scope.formData = {1: {values: {}}, 2: {values: {}}, 5: {values: {}} };

然后，在您的表单中，像这样更改您的 ng-model:

<form ng-submit="submit('8107a8e2-525a-4e57-a8cd-e4ec50e7979d')" ng-controller="formCtrl" method="POST">
      <label>Your name:</label><br/>
      <input type="text" ng-model="formData[1]['values'][0]" /><br/>
       <label>Your detail:</label><br/>
      <input type="text" ng-model="formData[2]['values'][0]"  /><br/>

      <input type="submit" value="Send" />
    </form>

希望这会有所帮助!