2017-06-06 80 views
0

使用Angular的第一週,我現在試圖發佈到第三方API。使用Angular發佈到APi

我想獲得一些幫助,讓這張表格正確發佈數據,對於額外的一些評論和期望什麼行正在做什麼。

我收到此錯誤

ReferenceError: formData is not defined 
    at h.$scope.processForm (controller.js:116) 
    at angular.js:10567 
    at angular.js:18627 
    at h.$eval (angular.js:12412) 
    at h.$apply (angular.js:12510) 
    at HTMLFormElement.<anonymous> (angular.js:18626) 
    at angular.js:2780 
    at q (angular.js:330) 
    at HTMLFormElement.c (angular.js:2779) 

我發佈帖子的API需要user_key 0000api_key 0000發送,雖然論文不是動態等形式字段,以便始終是相同的。

我目前的形式

<form name="myForm" id="signup-form" class="col-sm-8 col-sm-offset-2" ng-click="postdata(Fname, Lname, email)"> 
    <div class="form-group"> 
     <label for="first-name">First Name*</label> 
     <input type="text" class="form-control col-sm-12" name="Fname" placeholder="Enter first name" 
       ng-model="formData.Fname" 
       ng-required="true"> 
     <span ng-if="!myForm.Fname.$invalid" class="glyphicon glyphicon-ok " style="color: green" aria-hidden="true"></span> 
    </div> 

    <div class="form-group"> 
     <label for="first-name">Last Name*</label> 
     <input type="text" class="form-control col-sm-12" name="Lname" placeholder="Enter last name" 
       ng-model="formData.Lname" 
       ng-required="true"> 
     <span ng-if="!myForm.Lname.$invalid" class="glyphicon glyphicon-ok " style="color: green" aria-hidden="true"></span> 
    </div> 

    <div class="form-group"> 
     <label for="first-name">Email*</label> 
     <input type="email" class="form-control col-sm-12" name="email" placeholder="Enter valid E-mail" 
       ng-model="formData.email" 
       ng-required="true"> 
     <span ng-if="!myForm.email.$invalid" class="glyphicon glyphicon-ok " style="color: green" aria-hidden="true"></span> 
    </div> 

    <div class="form-group row"> 
     <div class="col-xs-6 col-xs-offset-3"> 
      <button ui-sref="form.select" class="btn btn-block btn-info" 
        ng-disabled="!myForm.$valid"> 
       Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
      </button> 
     </div> 
    </div> 
</form> 

我控制器

// submit button controller POST 
// ============================================================================= 
    .controller('formController', function ($scope, $http) { 
     $scope.Fname = null; 
     $scope.Lname = null; 
     $scope.email = null; 
     $scope.lblMsg = null; 
     $scope.processForm = function (Fname, Lname, email) { 
      var data = { 
       Fname: formData.Fname, 
       Lname: formData.Lname, 
       email: formData.email, 
       api_key: 0000, 
       user_key: 0000 
      }; 
//Call the services 
      $http.post('https://API/do/create', JSON.stringify(data)).then(function (response) { 
       if (response.data) 
        $scope.msg = "Post Data Submitted Successfully!"; 
      }, function (response) { 
       $scope.msg = "Service not Exists"; 
       $scope.statusval = response.status; 
       $scope.statustext = response.statusText; 
       $scope.headers = response.headers(); 
      }); 
     }; 
    }); 

回答

2

你應該在你的代碼的一些變化。

1-申報$scope.formData = {}

2-刪除

$scope.Fname = null; 
    $scope.Lname = null; 
    $scope.email = null; 
    $scope.lblMsg = null; 

因爲你可以$scope.formData對象訪問它們。

3-變化formData.Fname$scope.formData.Fname,和其他類似此

$scope.formData = {}; // declare in controller 



var data = { 
      Fname: $scope.formData.Fname, 
      Lname: $scope.formData.Lname, 
      email: $scope.formData.email, 
      api_key: 0000, 
      user_key: 0000 
     }; 

4-可以傳遞formData對象起作用或不通過它。如果傳遞formData起作用因此使用以下

納克單擊= 「POSTDATA(FORMDATA)」

var data = { 
     Fname: formData.Fname, 
     Lname: formData.Lname, 
     email: formData.email, 
+0

看起來很棒@哈迪。虐待通過你的步驟,並嘗試和實施,謝謝 – Beep

+0

只是測試這一點,一旦工作不好接受。 +1的解釋 – Beep

+0

嗯仍然不起作用 – Beep