如何在Angular JS中提交表单后将其重置为原始状态

How to reset a form to pristine after submitted in Angular JS

本文关键字：原始 状态 原始状 Angular JS 表单 提交      更新时间：2023-09-26

点击重置/发送按钮后，我还没有最艰难的时间将此表单重置为原始状态！我尝试过angular.copy方法，$scope.contactForm.$setPristine（）；但无济于事。我收到一个错误，说明$scope.contactForm.$setPristine（）；未定义。有人看到我的代码有问题吗！

这是我的HTML

<!-- CONTACT FORM -->
<div class="sixteen columns contact-container">
    <h2>Contact Me</h2>
    <p class="required">* = Required</p>
    <div id="messages" data-ng-show="message">{{message}}</div>
    <form name="contactForm" id="contactForm" class="contact" method="post" novalidate>
        <label ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">Name*
            <input type="text" name="name" class="form-control" data-ng-model="userData.name" placeholder="Joe Blow" required>
            <p data-ng-show="contactForm.name.$invalid && !contactForm.name.$pristine" class="help-block">You name is required.</p>
        </label>
        <label ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">eMail*
            <input type="email" name="email" class="form-control" data-ng-model="userData.email" placeholder="joe84@email.com"     required>
            <p data-ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">You email is required.    </p>
        </label>
        <label ng-class="{ 'has-error' : contactForm.comment.$invalid && !contactForm.comment.$pristine }">Comment*
            <textarea name="comment" class="form-control" ng-model="userData.comments" required></textarea>
            <p data-ng-show="contactForm.comment.$invalid && !contactForm.comment.$pristine" class="help-block">You comment is     required.</p>
        </label>
        <p>
            <button data-ng-click="reset()">Reset</button>
            <button type="submit" ng-click="processForm()">Submit</button>
        </p>
    </form>
</div>
<!-- END: CONTACT FORM -->

这是我的控制器

 // 'use strict';
/* Controllers */
var myAppControllers = angular.module('myAppControllers', ['myServices']);
myAppControllers.controller('contactCtrl', ['$scope', '$http',
    function ($scope, $http, $compile) {
        console.log('contactCtrl');
        // Empty object to hold input info
        $scope.userData = {};
        // Process Form
        $scope.processForm = function () {
            $http({
                method: 'POST',
                url: 'send-mail.php',
                data: $.param($scope.userData),
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
                .success(function () {
                    $scope.userData = {};
                    alert('Message Sent');
                });
        }
        $scope.reset = function () {
            $scope.userData = {};
            console.log('Reset Clicked');
        }
    }
]);

虽然这是一个老问题，但到目前为止，没有一个答案能提供有效的解决方案，我认为这样做会有助于其他可能有同样问题的人。（毕竟，这就是我降落在这里的原因：-）

正如几个答案所示，为了将表单设置回Angular的原始概念，必须调用表单上的$setPristine()：

$scope.contactForm.$setPristine();

您还必须清除模型，以便角度绑定将每个表单字段更新为空，或者像这里的OP一样，更新为其提示横幅（也称为水印文本、重影文本或占位符文本）：

$scope.userData = {};

通过将模型设置为空对象，那么在HTML中访问的任何属性（例如，此处的userData.name或userData.email）都将未定义，并触发空/线索横幅呈现。

这是我的建议：

1） 将ng提交到表单以处理结果，而不是点击按钮

2） 将重置按钮更改为不带ng-click的重置类型的输入（首先尝试，如果它像我预期的那样工作，它将清空所有值，这将更新模型，一切都将按照你想要的方式工作）-如果不是这样，你可以重新访问ng-clict方法

尝试

$scope.contactForm.$setPristine();
$scope.model = '';

只需像这样重置表单即可

$scope.reset = function () {
  $scope.userData = {};
  document.getElementById("contactForm").reset();
}

在窗体上调用reset将返回到原始状态。

相关文章：