CODEWITHSUNDEEP
angularjsreset
junior
junior

Reputation: 808

how to reset form with angular

this is my code:

function CustomersController ($scope, $http) {
    $http.get('/ci_angular/api/customers/').success(function(customers){
        $scope.customers = customers;
    });

    $scope.addCustomer = function(){
        var customer = {
            customerName: $scope.customerNameText,
            email: $scope.emailText,
            address: $scope.addressText,
            city: $scope.cityText,
            state: $scope.stateText,
            postalCode: $scope.postalCodeText,
            country: $scope.countryText,
        };

        $scope.customers.push(customer);

        // update 1

        $http.post('/ci_angular/api/customers/customer', customer);

        $scope.emptyCustomers= {};

        $scope.reset = function() {
            $scope.customers = angular.copy($scope.emptyCustomers);
        };

        // update 2

        $http.post('/ci_angular/api/customers/customer', customer)
            .success(function() {           
                 $scope.emptyCustomers= {};

                 $scope.customerForm.$setPristine();
            }
        );
    }
}

After the post success, I want to reset all the form field, but its not working, my form name is customerForm, is there something I missed? thanks in advance

Upvotes: 4

Views: 6128

Answers (3)

Bimal Kharel
Bimal Kharel

Reputation: 49


    $scope.addCustomer = function(){
      var customer = {
        customerName: '',
        email: '',
        address: '',
        city: '',
        state: '',
        postalCode: '',
        country: '',
      };

Place this code in your success function.

Upvotes: 1

Michael Kang
Michael Kang

Reputation: 52867

If you want to reset your form fields $dirty flags after a successful ajax call, then you should call setPristine() from inside of your success handler:

    $http.post('/ci_angular/api/customers/customer', customer)
        .success(function() {           
             $scope.customerForm.$setPristine();
        });

If you want to clear your form fields, then you should initialize a model inside your controller, so that you can bind them to the view, and clear them out later:

Controller:

function CustomersController ($scope, $http) {
    // initialize an empty customer. 
    $scope.customer = {};
    // its good practice to initialize your customers array too
    $scope.customers = [];

    $http.get('/ci_angular/api/customers/').success(function(customers){
        $scope.customers = customers;
    });

    $scope.addCustomer = function(customer){

        $http.post('/ci_angular/api/customers/customer', customer).success(function() {
            // push the customers to the array only when its successful
            $scope.customers.push(customer);

            // clearing the customer form is easy now, just set it to an empty object
            $scope.customer = {};
        });

    }
}

var app = angular.module('app', []);
app.controller('CustomersController', CustomersController);

HTML

<div ng-app="app" ng-controller="CustomersController">
     <form name="customerForm">
            customerName:<input type="text" name="name" ng-model="customer.name" /><br />
            email: <input type="text" name="email" ng-model="customer.email" /><br />
            address: <input type="text" name="address" ng-model="customer.address" /><br />
            city: <input type="text" name="city" ng-model="customer.city" /><br />
            state: <input type="text" name="state" ng-model="customer.state" /><br />
            postalCode: <input type="text" name="postalcode" ng-model="customer.postalCode" /><br />
            country: <input type="text" name="country" ng-model="customer.country" /><br />

        <button ng-click="addCustomer(customer)">Add Customer</button>
     </form>
</div>

Upvotes: 8

skool99
skool99

Reputation: 830

You can try to add a reset button on html and have reset function in $scope as below :

HTML

<button ng-click="reset()">RESET</button>

JS to add inside controller

$scope.emptyCustomers= {};

$scope.reset = function() {
    $scope.customers = angular.copy($scope.emptyCustomers);
};

Check Angularjs docs simple form for similar example : https://docs.angularjs.org/guide/forms

Hope this helps !

Upvotes: 0

Related Questions