2017-06-06 77 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