Clear the form after submit angularjs

Question

hi i want to clear the form values after successfull completion. Houw should i implemnt

<div ng-controller="employeelistController as listControl">
        <div class="container form-group" ng-controller="addEmployee as addemp">
            <form name="frmEmployee" ng-submit="Add(addemp.employee) && frmEmpbloyee.$valid">
                <div class="col-lg-4 ctrmain">
                    <div class="row">
                        <div class="col-lg-6">
                            <strong>Employee No</strong>
                        </div>
                        <div class="col-lg-6">
                            <input type="number" id="txtEmpId" ng-model="addemp.employee.employeeid" required class="form-control" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <strong>FirstName</strong>
                        </div>
                        <div class="col-lg-6">
                            <input type="text" id="txtfirstName" ng-model="addemp.employee.firstname" required class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <strong>LastName</strong>
                        </div>
                        <div class="col-lg-6">
                            <input type="text" id="txtlastName" ng-model="addemp.employee.lastname" required class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <strong>Department</strong>
                        </div>
                        <div class="col-lg-6">
                            <input type="text" id="txtDept" ng-model="addemp.employee.department" required class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <strong>DOB</strong>
                        </div>
                        <div class="col-lg-6">
                            <input type="date" id="DTdob" ng-model="addemp.employee.dateofbirth" required class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <input type="submit" id="btnSubmit" class="btn btn-primary value=" save" />
                    </div>
                </div>

which is the best way to implement this. I have tried many ways. please help.

$scope.Add = function (emp,$scope) {

        this.EmployeeObject = angular.copy(emp);
        employee.push(this.EmployeeObject);
        $scope.emp = null;
    }

which is the best way to implement this. I have tried many ways. please help.

or, $scope.emp = { }. The object you are binding to ng-model, make it as { } — Ved
– Ved, Commented Feb 2, 2015 at 5:30
squiroid's answer looks fine, if it's not working you have other issues. In the $scope.Add function you provide, you are setting $scope.emp = null while your model is addemp.employee ... so maybe you should $scope.addemp.employee = null or something. — alou
– alou, Commented Feb 2, 2015 at 11:35

squiroid · Accepted Answer · 2015-02-02 11:30:00Z

4

First of all you don't need $scope in the argument of the Add function.

  $scope.Add = function (emp) {     
    this.EmployeeObject = angular.copy(emp);
    employees.push(this.EmployeeObject);
    this.employee=null;
    $scope.$setPristine(true);
}

edited Feb 2, 2015 at 11:30

answered Feb 2, 2015 at 5:15

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

3 Comments

Aiju Over a year ago

its not working. may be the code is correct, but for my case its not binding with the model

squiroid Over a year ago

Here is the updated plunker:- plnkr.co/edit/bMyW8zgLKBw1sldxNlDc?p=preview

squiroid Over a year ago

You just need this.employee=null; $scope.$setPristine(true); after pushing data I m updating the answer as per your question

RandomUs1r · Accepted Answer · 2017-10-20 19:55:17Z

update it with the demo

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

app.controller('MainCtrl', function($scope, $compile) {
  'use strict';

  
      $scope.empList = [];
    $scope.addemp = {};
    $scope.saveEmp = function(){
      $scope.empList.push($scope.addemp);
      $scope.reset();
    };
    $scope.reset = function() {
      $scope.addemp = {};
      $scope.form.$setPristine();
    }
});

input.ng-invalid.ng-dirty {
          background-color: #FA787E;
        }
        input.ng-valid.ng-dirty {
          background-color: #78FA89;
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
        <form name="form" id="form" novalidate ng-submit="saveEmp()">
            <div class="row">
        <div class="col-lg-6">
            <strong>Employee No</strong>
        </div>
        <div class="col-lg-6">
            <input type="number" id="txtEmpId" ng-model="addemp.employeeid" required class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <strong>FirstName</strong>
        </div>
        <div class="col-lg-6">
            <input type="text" id="txtfirstName" ng-model="addemp.firstname" required class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <strong>LastName</strong>
        </div>
        <div class="col-lg-6">
            <input type="text" id="txtlastName" ng-model="addemp.lastname" required class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <strong>Department</strong>
        </div>
        <div class="col-lg-6">
            <input type="text" id="txtDept" ng-model="addemp.department" required class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <strong>DOB</strong>
        </div>
        <div class="col-lg-6">
            <input type="date" id="DTdob" ng-model="addemp.dateofbirth" required class="form-control" />
        </div>
    </div>
    <div class="row">
        <button type="submit" ng-disabled="form.$invalid ">submit</button>
        <button type="reset" ng-disabled="form.$pristine" ng-click="reset()">reset</button>
    </div>
        </form>
        <p>form: {{addemp | json}}</p>
        <p>empList: {{empList | json}}</p>
        <p>Pristine: {{form.$pristine}}</p>
        <p> <pre>Errors: {{form.$error | json}}</pre>

        </p>
    </div></div>

$scope.Add = function (emp) {
                this.EmployeeObject = angular.copy(emp);
                employee.push(this.EmployeeObject);
                $scope.emp = {}; // initialize the form to empty object 
                $scope.frmEmployee.$setPristine(); // set it to as user has not interacted with the form.
            }

its not working. may be the code is correct, but for my case its not binding with the model

Nimesh · Accepted Answer · 2017-12-12 12:48:10Z

0

I have cleared textbox with below code. e.g I have cleared FirstName textbox.

HTML SECTION

<td ng-show="a">
 <input type="text" ng-model="e.FirstName" />
</td>

Controller SECTION

e.FirstName= "";

answered Dec 12, 2017 at 12:48

Nimesh

3,6901 gold badge30 silver badges37 bronze badges

Comments

Ck. Mutai · Accepted Answer · 2018-11-02 10:15:54Z

0

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

app.controller('MainCtrl', function($scope, $compile) {
  'use strict';
function resetform() {
document.getElementById("frmEmployee").reset();
}
$scope.Add = function (emp,$scope) {
        this.EmployeeObject = angular.copy(emp);
        employee.push(this.EmployeeObject);
        resetform();
    }
});

edited Nov 2, 2018 at 10:15

answered Oct 31, 2018 at 7:27

Ck. Mutai

12 bronze badges

3 Comments

Master DJon Over a year ago

Current accepted answer seems to fulfill the OP's need. What does your answer brings more? Also, you shall always explain the code you post as answer.

Ck. Mutai Over a year ago

The resetform() function reset the all form fields. It is able to access the form using the id frmEmployee. This resetform() is called after submitting data

Master DJon Over a year ago

Well, I admit your solution is different and works too. So, could you just edit your answer and pin point the difference. Mostly, adding text explaining your solution. This is just to ameliorate the way you answer and wasn't in any sense discarding your answer.

Omkar Hande · Accepted Answer · 2020-07-07 06:46:58Z

0

Its pure JavaScript with simple one line code.

document.getElementById('yourFormId').reset()

Add this syntax at the end of the function in controller after submitting the form.

answered Jul 7, 2020 at 6:46

Omkar Hande

911 silver badge4 bronze badges

Collectives™ on Stack Overflow

Clear the form after submit angularjs

5 Answers 5

3 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related