CODEWITHSUNDEEP
javascriptangularjs
BARNOWL
BARNOWL

Reputation: 3589

angular wont reset form after ng-click?

My form won't reset after I do a ng-click, am I doing it right?

I can submit just fine, but the form will not reset, here is my log:

angular.js:12701 POST http://127.0.0.1:8000/auth/post 500 (Internal Server Error)

But my post submits fine, it just doesn't reset.

jsfiddle

https://jsfiddle.net/2fyynf6p/

main.js

var app = angular.module('eli', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');

});

app.controller('mainCtrl', ['$scope', '$http', function($scope, $http){


    $scope.posts = {};

    $scope.addPost = function(){

        $http.post('/auth/post', {
            title: $scope.post.title,
            body: $scope.post.body

        }).then(function(data, status, headers, config){
            $scope.posts.push(data);
            $scope.postform = "";


        });


    };


}]);

html

            <form  name="postform" method="POST" novalidate>
                   {{ csrf_field() }}
                <div class="form-group">
                    <label for="post.title">Title</label>
                    <input ng-model="post.title"  class="form-control" type="text" name="title" placeholder="Enter a title" required/>
                </div>

                <div class="form-group">
                    <label for="post.title">Post</label>
                    <textarea ng-model="post.body" type="text" class="form-control" name="body" id="" cols="10" rows="5"></textarea>
                </div>

                <button id="eli-style-button" ng-click="addPost()" class="btn btn-primary" type="submit">Submit</button>
            </form>

Upvotes: 2

Views: 295

Answers (2)

Daniel Devadoss
Daniel Devadoss

Reputation: 87

Can do something like this

$scope.addPost = function({
$http.post('/auth/post', {
title: $scope.post.title,
body: $scope.post.body
}).then(function(data, status, headers, config) {
$scope.posts.push(data);
$scope.post.title = "";
$scope.post.body = "";
});
};

Upvotes: 3

BARNOWL
BARNOWL

Reputation: 3589

solved it by doing this, still within the scope function, but outside of the http post .

var app = angular.module('eli', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');

});

app.controller('mainCtrl', ['$scope', '$http', function($scope, $http){


    $scope.posts = {};

    $scope.addPost = function(){

        $http.post('/auth/post', {
            title: $scope.post.title,
            body: $scope.post.body

        }).then(function(data, status, headers, config){
            $scope.posts.push(data);    

        });

        $scope.post.title = '';
        $scope.post.body = '';

    };


}]);

Upvotes: 0

Related Questions