Question

一旦点击重置/发送按钮，我就没有最艰难的时间将此表单重置为pristine！我尝试过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');
        }
    }
]);

Answer 1

这是我的建议：

1）将ng-submit添加到表单以处理结果，而不是按住ng键单击按钮

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

Answer 2

虽然这是一个老问题，但由于迄今为止没有一个答案提供了可行的解决方案，我认为这样做有利于那些可能有同样问题的人。（毕竟，这就是我降落在这里的原因： - ）

正如一些答案所表明的，为了将表单设置回Angular的原始概念，您必须在表单上调用$setPristine()：

$scope.contactForm.$setPristine();

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

$scope.userData = {};

通过将模型设置为空对象，然后以HTML格式访问的任何属性（例如userData.name或userData.email）都将是未定义的，并触发空/提示横幅渲染。

Answer 3

尝试

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

Answer 4

只需像这样重置表单

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

在表单上调用reset会回到原始状态。

如何在Angular JS中提交后将表单重置为pristine

4 个答案: