提交angularjs后清除表单

Question

嗨，我想在成功完成后清除表单值。 我应该如何实施

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

这是实现这一点的最佳方式。 我尝试了很多方法。 请帮忙。

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

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

这是实现这一点的最佳方式。 我尝试了很多方法。 请帮忙。

Answer 1

首先，您不需要在 Add 函数的参数中使用 $scope 。

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

Answer 2

用演示更新它

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

Answer 3

我已经用下面的代码清除了文本框。 例如，我已经清除了名字文本框。

HTML 部分

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

控制器部分

e.FirstName= "";

Answer 4

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();
    }
});

Answer 5

它是带有简单的一行代码的纯 JavaScript。

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

提交表单后，在控制器中的函数末尾添加此语法。