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

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

网页部分

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

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