angular wont reset form after ng-click?

Question

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

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>

@VicJordan its made in laravel though, let me try to fiddle it — BARNOWL, Nov 14 '17 at 02:01
Since the role of forms in client-side AngularJS applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload. For more information, see [Submitting a form and preventing the default action](https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action). — georgeawg, Nov 14 '17 at 02:06
can you explain in much simpler terms should i implement `event.preventDefault()` in angular — BARNOWL, Nov 14 '17 at 02:08
For more information, see [AngularJS Developer Guide - forms](https://docs.angularjs.org/guide/forms). — georgeawg, Nov 14 '17 at 02:26
This question has been answered long time ago: https://stackoverflow.com/questions/21571370/resetting-form-after-submit-in-angularjs — Daniel Delgado, Nov 14 '17 at 03:19

Daniel Devadoss · Answer 1 · 2017-11-14T05:44:59.417

3

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 = "";
});
};

edited Nov 14 '17 at 05:44

answered Nov 14 '17 at 03:04

Daniel Devadoss

77
1
5

that didn't work, my way worked, but i appreciate your assistance though. – BARNOWL Nov 14 '17 at 21:35

score 0 · Accepted Answer · answered Nov 14 '17 at 02:53

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 = '';

    };


}]);

angular wont reset form after ng-click?

2 Answers2