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, Feb 02 '15 at 05: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, Feb 02 '15 at 11:35

squiroid · Accepted Answer · 2015-02-02T11:30:00.423

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 02 '15 at 11:30

answered Feb 02 '15 at 05:15

squiroid

13,809
6
47
67

its not working. may be the code is correct, but for my case its not binding with the model – Aiju Feb 02 '15 at 06:14
Here is the updated plunker:- http://plnkr.co/edit/bMyW8zgLKBw1sldxNlDc?p=preview – squiroid Feb 02 '15 at 11:21
You just need this.employee=null; $scope.$setPristine(true); after pushing data I m updating the answer as per your question – squiroid Feb 02 '15 at 11:22

score 1 · Answer 2 · edited Oct 20 '17 at 19:55

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 — Aiju, Feb 02 '15 at 06:14

score 0 · Answer 3 · answered Dec 12 '17 at 12:48

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 '17 at 12:48

Nimesh

3,342
1
28
35

Ck. Mutai · Answer 4 · 2018-11-02T10:15:54.697

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 02 '18 at 10:15

answered Oct 31 '18 at 07:27

Ck. Mutai

1
2

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. – Master DJon Oct 31 '18 at 07:55
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 – Ck. Mutai Nov 01 '18 at 06:48
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. – Master DJon Nov 01 '18 at 14:30

score 0 · Answer 5 · answered Jul 07 '20 at 06:46

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 07 '20 at 06:46

Omkar Hande

71
1
4

Clear the form after submit angularjs

5 Answers5

Linked