Why isn't my form data posting while using angular $http

Question

I am currently running into a road block while trying to post form data using the angular $http service. I tested the api endpoint for posting, and everything worked fine there. When I try to post using the angular app, I continually get three consistent errors TypeError: $http.post(...).then(...).error is not a function, POST http://127.0.0.1:8000/api/reviews/ 400 (Bad Request) ,Possibly unhandled rejection:

I've searched the angular docs throughly for a better understanding, but seem to be just spinning my wheels. I originally had `$http.post('/api/reviews/',this.reviews).success(...).error(...) but I saw information that it had been removed. I then entered then(...) in the place of success but still got errors.

Currently my ReviewsController looks like the following(This is a template being used inside of a directive FYI):

myStore.controller('myReviewsController', function($http){
    this.reviews = {}
    this.addReview = function(product){
        $http.post('/api/reviews/', this.reviews).then(function(data){
            console.log("Successful submission")
        }).error(function(data){
            console.log('Unsuccessful submission')
        })
        if(!product.reviews)
            product.reviews =[]

//      product.reviews.push(this.reviews)
//      this.reviews = {}
    }
})

And the reviews template reads:

<h4>Reviews</h4>
<blockquote ng-repeat="reviews in product.reviews">
    <b>
        {{reviews.stars}}
        {{reviews.body}}
    </b>
    <cite>
        {{reviews.author}}
    </cite>
</blockquote>
<form name="reviewForm"  ng-controller="myReviewsController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<blockquote>
    <b>
        {{reviewCtrl.reviews.stars}}
        {{reviewCtrl.reviews.body}}
    </b>
    <cite>
        {{reviewCtrl.reviews.author}}
    </cite>
</blockquote>
<fieldset>
    <legend>Submit a review</legend>
    <div class="form-group" ng-class="{'has-error' : reviewForm.rating.$invalid && reviewForm.rating.$dirty}">
        <select ng-model="reviewCtrl.reviews.stars" required class="form-control">
            <option value="" selected>Enter a Rating</option>
            <option value="1">1 star</option>
            <option value="2">2 star</option>
            <option value="3">3 star</option>
            <option value="4">4 star</option>
            <option value="5">5 star</option>
        </select>
        <span class="text-danger" ng-show="reviewForm.rating.$invalid && reviewForm.rating.$dirty">Please enter a rating</span>
    </div>
    <div class="form-group" ng-class="{'has-error' : reviewForm.comments.$invalid && reviewForm.comments.$dirty }">
        <label>Comments</label>
        <textarea class="form-control" name="comments" placeholder="Enter your comments" ng-model="reviewCtrl.reviews.body" required></textarea>
        <span class="text-danger" ng-show="reviewForm.comments.$invalid && reviewForm.comments.$dirty">Please provide some comments</span>
    </div>
    <div class="form-group" ng-class="{'has-error' : reviewForm.email.$invalid && reviewForm.email.$dirty }">
        <label>Email:</label>
        <input class="form-control" type="email" name="email" placeholder="[email protected]" ng-model="reviewCtrl.reviews.author" required>
        <span class="text-danger" ng-show="reviewForm.email.$invalid && reviewForm.email.$dirty">Please provide your email</span>
    </div>
    <div> reviewForm is {{reviewForm.$valid}} </div>
    <input type="submit" value="submit" ng-click="onSubmit()" class="btn">
</fieldset>
</form>

Thanks

Yes, the api calls for email, stars, and comments as the data. I also checked the path in postman as well and it works like a charm...not sure why it doesn't work in my form — Joel Carter
– Joel Carter, Commented Feb 28, 2017 at 5:03
Tried removing ng-click="onSubmit()" but that didn't work either. — Joel Carter
– Joel Carter, Commented Feb 28, 2017 at 5:07

Keshav · Accepted Answer · 2017-02-28 07:05:37Z

2

You cannot use .error function with .then.You need to call .success for that.

 $http.post('/api/reviews/', this.reviews).success(function(data){
                console.log("Successful submission")
            }).error(function(data){
                console.log('Unsuccessful submission')
            })

or If you want to use .then then use it like this

$http.post('/api/reviews/', this.reviews).then(function(data){
                console.log("Successful submission")
            }).catch(function(data){
                console.log('Unsuccessful submission')
            })

Bad request error occurs due to mismatch in model your model should be same as server side model.

edited Feb 28, 2017 at 7:05

answered Feb 28, 2017 at 5:08

Keshav

8312 gold badges12 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Joel Carter Over a year ago

Thanks for this. I no longer get the TypeError or the Possible unhandled Rejections errors...but I still get the 400 bad request error. Anything I should change in regards to the form?

Hadi Over a year ago

I think it should be ng-submit="reviewForm.$valid && reviewCtrl.addReview(reviewCtrl.reviews)"

Joel Carter Over a year ago

@hadiJz I've changed that as well...but the Bad Request error still appears. I'm guessing it's because I need to change the model of my form?

Hadi Over a year ago

ur model should be compatible with server side model.

Joel Carter Over a year ago

@hadiJz yes sir! you're correct. I reformatted the ng-models and it works like a charm now!

|

Collectives™ on Stack Overflow

Why isn't my form data posting while using angular $http

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related