posting data through angular form without page reload in angular

Question

$scope.createPermission= function(form){
    AppFactory.createNewPermission(form)
        .success(function(data) { 

            $scope.updatedPermissions = data;

            $scope.navMode='getPermission'

            var original = $scope.permission;
            $scope.reset(original);
            $scope.permission = {}; // clear the form 
        })
        .error(function(data) {
            console.log('Error in creating permission: ' + data);
        });

    $scope.Execute=function(id) {
        if($scope.navMode=='updatePermission') {
            $scope.editPermission(id);
        } else if($scope.navMode=='createPermission') {
            $scope.createPermission($scope.permission);
        }
    }
}

$scope.reset= function(original) {
    $scope.permission= angular.copy(original)
    $scope.form2.$setPristine(true);
    //$scope.form2.$setUntouched(true);
}

HTML:

<div class="row">
    <div class="container col-sm-6 col-sm-offset-2" 
         ng-show="navMode == 'createPermission' || navMode=='updatePermission' || navMode=='getPermission'">

        <div>
            <h1>Permissions</h1>
        </div>
    </div>
    <form class="form2" ng-show="showHide('Create')" ng-if=""name="form2" ng-submit="Execute(permissionId)" novalidate>

        <div class="form-group" ng-class="{ 'has-success': form2.name.$valid && submitted, 'has-error': form2.name.$invalid && submitted }">
            <label>Permission Name</label>

            <input type="text" name="name" class="form-control" ng-model="permission.name" required/>
            <p class="help-block" ng-show="form2.name.$error.required && submitted">
                A permission name is required
            </p>
        </div>

        <div class="row col-lg-offset-3">
            <button class="btn btn-primary" ng-disabled="form2.$invalid" type="submit">Save</button>
        </div>
    </form>
</div>

I have above piece of code in controller and is executed on submission of the form. Now , It does work fine on page reload but I can not add data through form back to back. I need to reload teh page everytime to post new data through the form.

Why exactly is that ?

How do I fix this?

rom99 · Accepted Answer · 2015-08-04 21:47:44Z

2

Without seeing the HTML part of this, I would guess you are using the action attribute of <form>. AngularJS provides ng-submit which allows you to set a handler for the submit event, without actually 'submitting' the form in the traditional sense. See https://docs.angularjs.org/api/ng/directive/ngSubmit.

answered Aug 4, 2015 at 21:47

rom99

8095 silver badges15 bronze badges

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

3 Comments

Simran Kaur Over a year ago

I have updated the code with html. I am using ng-submit already to call the function. Could you please have a look.

rom99 Over a year ago

Hmm, it looks like it should work. I see the form is named "form2" which might suggest there is another form being used, is it possible another form exists in the same scope?

Simran Kaur Over a year ago

I have multiple forms named form1, form2 e.t.c which are rendered based on value of variable navMode, fields of form1 has ng-model such as $scope.user.blabla and fields of form2 has ng-models such as $scope.permission.blabla, so I suppose scopes are different?

Collectives™ on Stack Overflow

posting data through angular form without page reload in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related