Reset the form upon submission in AngularJS

Question

Reset the form upon submission in AngularJS

Hey, I'm looking to reset the form values after a successful submission. How can I achieve this?

<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>

Can someone suggest the most effective way to do this? I've tried various methods but need some guidance.

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

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

I'm still trying to figure out the best approach for this issue. Any help would be appreciated.

javascript angularjs

Answer 1

Answer №1

To begin with, there is no need for $scope to be included 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);
}

Answer 2

To begin with, there is no need for $scope to be included 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);
}

Answer 3

Answer №2

customize it with the demonstration

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

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

  
      $scope.employeeList = [];
    $scope.addEmployee = {};
    $scope.saveEmployee = function(){
      $scope.employeeList.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>employeeList: {{employeeList | 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.
            }

Answer 4

customize it with the demonstration

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

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

  
      $scope.employeeList = [];
    $scope.addEmployee = {};
    $scope.saveEmployee = function(){
      $scope.employeeList.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>employeeList: {{employeeList | 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.
            }

Answer 5

Answer №3

I successfully emptied the input field using the code provided below. For example, I cleared the FirstName input field.

HTML SECTION

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

Controller SECTION

e.FirstName= "";

Answer 6

I successfully emptied the input field using the code provided below. For example, I cleared the FirstName input field.

HTML SECTION

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

Controller SECTION

e.FirstName= "";

Answer 7

Answer №4

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

application.controller('MainCtrl', function($scope, $compile) {
  'use strict';
function clearForm() {
document.getElementById("frmEmployee").reset();
}
$scope.Add = function (employeeRecord,$scope) {
        this.EmployeeProfile = angular.copy(employeeRecord);
        employees.push(this.EmployeeProfile);
        clearForm();
    }
});

Answer 8

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

application.controller('MainCtrl', function($scope, $compile) {
  'use strict';
function clearForm() {
document.getElementById("frmEmployee").reset();
}
$scope.Add = function (employeeRecord,$scope) {
        this.EmployeeProfile = angular.copy(employeeRecord);
        employees.push(this.EmployeeProfile);
        clearForm();
    }
});

Answer 9

Answer №5

Using a concise line of JavaScript, this code can reset form fields effortlessly.

document.getElementById('theForm').reset()

Simply insert this snippet at the conclusion of your controller function to reset the form upon submission.

Answer 10

Using a concise line of JavaScript, this code can reset form fields effortlessly.

document.getElementById('theForm').reset()

Simply insert this snippet at the conclusion of your controller function to reset the form upon submission.

Reset the form upon submission in AngularJS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue encountered with the style parameter in print-js when attempting to print from a Vue.js component

Discover the power of positioning data labels in c3js!

"Unexpected behavior: Angular route parameters are found to be empty upon receiving the API

Adding a new row to an HTML table using JavaScript

Blazor combines the power of both C# and JavaScript by allowing them to be executed in a single

I am experiencing an issue where the position of the value in the returned response array keeps changing after an Ajax request is made. How can

Sending information back to the server without causing a postback, all while remaining unseen

Headers cannot be set after they have already been sent following the establishment of the content-type

Unlock the full potential of knockout.js by mastering how to leverage templates recursively

What is the best way to combine elements from different arrays to create a comprehensive listing?

My pathways are clearly mapped out, yet express is returning a frustrating 404 error

Discovering the current time and start time of today in EST can be achieved by utilizing Moment.js

I am facing a recurring issue where I am unable to add new libraries to my node_modules directory due to encountering the same error every time I attempt to

A guide on invoking a then function following a successful method in Angular JS

Oops! Issue: The mat-form-field is missing a MatFormFieldControl when referencing the API guide

Troubleshooting the error message: "Unable to add or update a child row due to a foreign key constraint failure"

Having trouble displaying results in Vue.js after making an API request?

Playback on iPhone devices and Safari experiences a 50% reduction with AudioWorklet

Tips for refreshing the page without losing the values of variables

Converting input dates in nest.js using TypeScript formatting