sending multiple parameters as post request in angular js to a laravel backend

Question

Hi I am trying to submit a form data using post request in angular js. Here are the codes :

contact.html

<form class="acodehub-form" ng-submit="submit()" method="post" novalidate>
        <div class="form-group first_name">
            <label for="first_name">First Name</label><br>
            <input type="text" id="first_name" ng-model="fname" name="fname" class="acodehub-input form-control " required tabindex="10" maxlength="40" value="" placeholder="First Name" />
            <div class="errorMessage" ng-show="errorFN">First name cannot be empty</div>
        </div>
        <div class="form-group last_name">
            <label for="last_name">Last Name</label><br>
            <input type="text" id="last_name" ng-model="lname" name="lname" class="acodehub-input form-control " required tabindex="11" maxlength="40" value="" placeholder="Last Name" />
            <div class="errorMessage" ng-show="errorLN">Last name cannot be empty</div>
        </div>
        <div class="form-group inputEmail">
            <label for="email">Email</label><br>
            <input type="email" id="inputEmail" ng-pattern = "regexemail" ng-model="email" name="email" class="acodehub-input form-control" required tabindex="12" value="" maxlength="40" placeholder="Email" />
            <div class="errorMessage" ng-show="errorE">Please enter a valid email address</div>
        </div>
        <div class="form-group reason">
            <label for="reason">Subject</label>
            <select name="reason" ng-model="reason" id="reason" class="typeselects acodehub-input acodehub-select form-control" placeholder="What can we help you with?" tabIndex="13" required>

                <option selected value="">What can we help you with?</option>
                <option value="Marketing">Marketing</option>
                <option value="Advertise"  >Advertise</option>
                <option value="Product Review">Product Review</option>
                <option value="Tutorial Request">Tutorial Request</option>
                <option value="Freebie Request">Freebie Request</option>
                <option value="Write for us"  >Write for us</option>
                <option value="Sticker Request">Ask a question?</option>
                <option value="Privacy Policy"  >Privacy Policy</option>
                <option value="Other">Other</option>
            </select>
            <div class="errorMessage" ng-show="errorR">Select a valid subject</div>
        </div>
        <div class="form-group inputDescription">
            <label for="inputDescription">Tell Us More</label><br>
            <textarea name="description" ng-model="description" value="" id="inputDescription" required class="form-control acodehub-input acodehub-textarea" tabindex="14"></textarea>
            <div class="errorMessage" ng-show="errorD">Please tell us something about your query. Minimum 50 letters.</div>
        </div>
        <div>
            <button type="submit" class="acodehub-btn acodehub-btn-dark"
            data-ga-track="true" data-ga-group="Contact Us"
            data-ga-event="Contact Us - Click to Submit Form"
            data-ga-val="Submit">
            Submit
        </button>
    </div>
</form>

controller.js

    angular.module('app.controllers',[
        'app.directives',
        'app.factories'
        ]).controller('ContactController',['$scope','$http','$httpParamSerializer',function($scope,$http,$httpParamSerializer){
            $scope.submit = function() {
var text = {"first_name":$scope.fname,"last_name":$scope.lname,"email":$scope.email,"reason":$scope.reason,"description":$scope.description};
                $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
                $http.post('/api/contact',$httpParamSerializer(text)).then(function (data, status, headers, config) { 
                    alert("success"); 
                    console.log(data);
                    console.log(status);
                    console.log(headers);
                    console.log(config);
                },function (data, status, headers, config) { 
                    alert("error"); 
                    console.log(data);
                    console.log(status);
                    console.log(headers);
                    console.log(config);
                });
            }
        }]);

web.php(in laravel)

Route::post('/api/contact','ContactController@submit');

contactcontroller

public function submit(Request $request) {
        $this->validate($request,array(
            'first_name'=>'required',
            'last_name'=>'required',            
            'email'=>'required|email',
            'reason'=>'required',
            'description'=>'required|min:20'
        ));

        $data = array(
            'first_name'=>$request->first_name,
            'last_name'=>$request->last_name,          
            'email'=>$request->email,
            'reason'=>$request->reason,
            'description'=>$request->description
        );
        Mail::queue('emails.contact',$data,function($message) use($data) {
            $message->from($data['email']);
            $message->to('gaurav.roy142@gmail.com');
            $message->subject($data['reason']);
        });


        //dd($request);

        //echo 'hello '.$submit;
       if(count(Mail::failures())>0) {
            return $request;
       }else {
            return $request;
       }
       //return $data;
    }

I am getting the output in the console as:

Object {data: "<!DOCTYPE html>
↵<html ng-app="app">
↵<head>
↵  <b…rc="/app/services.js"></script>
↵</body>
↵</html>", status: 200, config: Object, statusText: "OK", headers: function}
undefined
undefined
undefined

I tried every solution provided on stackoverflow or any other website but I am not able to set it up correctly, everytime I am getting the same output as above. I know I am missing something somewhere and now I am out of any ideas how to set it up correctly. Please help me fix it up.

Answer 1

$http returns a promise. In case of success or error, an object containing data, status, config, statusText and headers properties (as you can see in your console log) is resolved or rejected.

So, change your code to :

$http.post('/api/contact',$httpParamSerializer(text)).then(function (response) { 
         alert("success"); 
         console.log(response.data);
         console.log(response.status);
         console.log(response.headers);
         console.log(response.config);
     },function (error) { 
         alert("error"); 
         console.log(error.data);
         console.log(error.status);
         console.log(error.headers);
         console.log(config);
     });