Using Angular to post to a APi

Question

First week using Angular and I am now trying to post to a third party API.

I would like some help getting this form posting the data correctly, for extra points some comments and expectation on what line is doing what.

I am getting this error

 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)

The API I am posting to requires user_key 0000 and api_key 0000to be sent, although theses are not dynamic like the form fields so are always the same.

My current form

<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>

My controller

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

Answer 1

You should have some changes in your code.

1- Declare $scope.formData = {}

2- Remove

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

because you can access to them with $scope.formData object.

3- change formData.Fname to $scope.formData.Fname, and other similar to this

  $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- you can pass formData object to function or don't pass it.If passing formData to function so use following

ng-click="postdata(formData)"

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