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

Question

单击重置/发送按钮后，我现在还不是最困难的时间将表单重置为原始状态！ 我已经尝试了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的类型为reset的输入（首先尝试，如果它按我期望的那样工作，它将清空所有值，这将更新模型，一切将按照您的方式工作想要）-如果没有，您可以重新访问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();
}

在表单上调用重置会返回到原始状态。