How do I clear or reset data in a form in angularjs?

Question

Been finding how to clear form data with the use of angular and $setPristine Function but still no results always gives me an error saying $setPristine is not a function. Can anyone kindly help me for a solution?

here's my angular.controller

$scope.AddCustomer = function () {

            var CustDetails = {
                cname: $scope.CusDetails.cname,
                comname: $scope.CusDetails.comname,
                tel: $scope.CusDetails.tel,
                email: $scope.CusDetails.email

            };           

            CustService.Customer(CustDetails, function (res) {
                console.log(res);

                $.extend($.gritter.options, {
                    position: 'bottom-right',
                });

                if (res.data == 'success') {
                    $.gritter.add({

                        title: 'Success!',
                        text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustDetails.cname + '</span></h4>',
                        time: '5000',
                        close_icon: 'l-arrows-remove s16',
                        icon: 'glyphicon glyphicon-ok-circle',
                        class_name: 'success-notice'
                    });

                    //CustDetails = {};

                    customerForm.$setPristine(true);
                }
                else {
                    $.gritter.add({
                        title: 'Failed!',
                        text: 'Failed to add a new customer',
                        time: '5000',
                        close_icon: 'l-arrows-remove s16',
                        icon: 'glyphicon glyphicon-remove-circle',
                        class_name: 'error-notice'
                    });
                }


            });          
        }

Here's the Html code

<div ng-controller="AddCustomerController">
    <div class="page-content-wrapper">
        <div class="page-content-inner">
            <div id="page-header" class="clearfix">
                <div class="page-header">
                    <h2>Add Customer</h2>
                    <span class="txt">Create and add new customer.</span>
                </div>
            </div>

           <!--Start .row-->
            <div class="row">
                <div class="col-md-1">
                </div>

                <div class="col-lg-9 col-sm-9 col-xs-12">
                    <!--col-lg-9 starts here-->
                    <div class="panel panel-default toggle panelMove panelClose panelRefresh">
                        <div class="panel-heading">
                            <h4 class="panel-title">Customer Details</h4>
                        </div>
                        <div class="panel-body pt0 pb0">
                            <form class="form-horizontal group-border stripped" id="customerForm">
                                <div class="form-group">
                                    <label class="col-lg-2 col-md-3 control-label">Customer Name</label>
                                    <div class="col-lg-10 col-md-9">
                                        <input type="text" required id="cname" ng-model="CusDetails.cname" class="form-control" name="cname" />
                                    </div>
                                </div>
                                <!--end of .form-group-->
                                <div class="form-group">
                                    <label class="col-lg-2 col-md-3 control-label">Company Name</label>
                                    <div class="col-lg-10 col-md-9">
                                        <input type="text" required id="comname" ng-model="CusDetails.comname" class="form-control" name="comname" />
                                    </div>
                                </div>
                                <!--end of .form-group-->
                                <div class="form-group">
                                    <label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
                                    <div class="col-lg-10 col-md-9">
                                        <div class="input-group input-icon">
                                            <span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
                                            <input ng-model="CusDetails.tel" class="form-control" id="ctel" type="text" placeholder="(999) 999-9999">
                                        </div>
                                    </div>
                                </div>
                                <!-- End .form-group  -->
                                <div class="form-group">
                                    <label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
                                    <div class="col-lg-10 col-md-9">
                                        <input id="email" ng-model="CusDetails.email" type="text" class="form-control" name="placeholder" placeholder="[email protected]">
                                    </div>
                                </div>
                                <!-- End .form-group  -->
                            </form>
                        </div>
                    </div>
                    <!--End .panel-->
                </div>
                <!--.col-9 ends here-->
            </div>
            <!--End .row-->
            <!--Start .row-->
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-lg-9 col-sm-9 col-xs-12">
                    <button id="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
                    <button type="submit" class="btn btn-default pad">Cancel</button>
                </div>
            </div>
        </diV>
    </div>
</div>

Could you share the HTML code?

pdorgambide
– pdorgambide

2016-07-27 05:52:05 +00:00
Commented Jul 27, 2016 at 5:52 — pdorgambide
– pdorgambide, Commented Jul 27, 2016 at 5:52
@pdorgambide added the html code. :)

Ashane Alvis
– Ashane Alvis

2016-07-27 05:58:26 +00:00
Commented Jul 27, 2016 at 5:58 — Ashane Alvis
– Ashane Alvis, Commented Jul 27, 2016 at 5:58

Nirmal Goswami · Accepted Answer · 2016-07-27 06:37:37Z

2

You can remove form field value by removing value of ng-model like

Your code

var CustDetails = {
                cname: $scope.CusDetails.cname,
                comname: $scope.CusDetails.comname,
                tel: $scope.CusDetails.tel,
                email: $scope.CusDetails.email

            };

Replace with this

$scope.CustDetails = {
                cname: $scope.CusDetails.cname,
                comname: $scope.CusDetails.comname,
                tel: $scope.CusDetails.tel,
                email: $scope.CusDetails.email

            };

Your code

customerForm.$setPristine(true);

Replace with this

$scope.CustDetails={};

answered Jul 27, 2016 at 6:37

Nirmal Goswami

8341 gold badge7 silver badges18 bronze badges

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

1 Comment

Nirmal Goswami Over a year ago

@AshaneAlvis any time

Pritam Banerjee · Accepted Answer · 2016-07-27 06:05:08Z

1

use:

$scope.$destroy

as it removes all the children associated to the parent scope and will clear all the data associated with it.

edited Jul 27, 2016 at 6:05

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

answered Jul 27, 2016 at 6:00

Vikash Kumar

1,7161 gold badge12 silver badges17 bronze badges

Comments

Pritam Banerjee · Accepted Answer · 2016-07-27 06:01:56Z

0

Use

$scope.customerForm.$setPristine(true);

Give the form a name like

name= "CusDetails"

Then It will solve the problem.

edited Jul 27, 2016 at 6:01

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

answered Jul 27, 2016 at 5:51

Anuradha

1691 silver badge10 bronze badges

1 Comment

Ashane Alvis Over a year ago

Nope Then it says $scope.customerForm is undefined

pdorgambide · Accepted Answer · 2016-07-27 06:10:09Z

0

Use name attr instead of id. name="forName"
The form reference inside Controller will be $scope.formName

answered Jul 27, 2016 at 6:10

pdorgambide

1,86722 silver badges35 bronze badges

Comments

Hetdev · Accepted Answer · 2016-10-26 16:31:28Z

0

You can set the form with the code below:

$scope.customerForm.$setPristine();
$scope.customerForm.$setUntouched();
$scope.CustDetails={};

answered Oct 26, 2016 at 16:31

Hetdev

1,5352 gold badges22 silver badges31 bronze badges

Collectives™ on Stack Overflow

How do I clear or reset data in a form in angularjs?

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related