在 AngularJS 中将表单设置为未提交，而不使用重置按钮单击答案

【问题标题】：Set a form to unsubmitted in AngularJS without using a reset button click在 AngularJS 中将表单设置为未提交，而不使用重置按钮单击
【发布时间】：2017-11-08 23:11:32
【问题描述】：

我在模态对话框中有一个简单的表单：

<div id="myModal6" class="modal fade" role="dialog">
<div class="modal-dialog">

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Please add Payment Details</h4>
        </div>
        <div class="modal-body clearfix">
            <form id="checkout" class="col-lg-12" ng-submit="checkoutForm.$valid && finishCheckout()" method="post" name="checkoutForm" novalidate>

                <input class="form-control card_number" required ng-model="customer.number" name="number1" ng-minlength=12  maxlength="22" placeholder="xxxx-xxxx-xxxx-xxxx">


                <div class="error" ng-show="(checkoutForm.$submitted || checkoutForm.number1.$dirty && checkoutForm.number1.$invalid) && payee">
                    <small class="error text-danger" ng-show="checkoutForm.number1.$error.required">
                        Card No is required.
                    </small>
                    <small class="error text-danger" ng-show="checkoutForm.number1.$error.minlength">
                        Card No is required to be at least 12 characters
                    </small>
                </div>

                <div class="card_form">
                    <input type="submit" id="submit" value="save">
                </div>

            </form>
        </div>
    </div>
</div>

当用户在向文本框添加任何内容之前单击提交按钮时，由于 Angular，会出现一条验证消息。世界上一切都很好。

但是，如果用户随后单击关闭按钮并稍后返回此模式，则验证消息仍然存在。我发现使用重置按钮，我可以将表单对象传递给单击处理程序，以利用内置的 $setPristine 函数来清除表单的验证，但我想在没有重置按钮的情况下执行此操作。

有没有一种方法可以访问 AngularJS 的 $setPristine 函数，而无需使用按钮将表单对象输入我的角度范围？

编辑：

我已将以下两项添加到我的表单中：

    <div ng-init="initCardForm(checkoutForm)"></div>
    <input type="button" value="Reset Form" ng-click="resetCardForm(checkoutForm)" />

连同它们的功能：

    $scope.initCardForm = function(form) { 
        $scope.myForm = form; 
        $scope.myForm.$setPristine(); 
    } 
    $scope.resetCardForm = function(form) { 
        $scope.myForm = form; 
        $scope.myForm.$setPristine(); 
    }

重置按钮有效，但初始化调用并没有完成我想要做的事情。我相信这可能与 init 上的模态加载有关，它不会在每次调用模态时都初始化。我的目标是每次显示模态弹出窗口时，都会将表单设置为 Pristine。

【问题讨论】：

标签： angularjs forms modal-dialog

【解决方案1】：

简短回答：是的，您可以。您可以使用ng-init 做一个小技巧，然后将表单实例传递给控制器。 (PLUNKER)

HTML

<form name="myForm" class="col-lg-12" novalidate>
  <div ng-init="initForm(myForm)"></div>
  <!-- rest of your html -->
</form>

控制器

function MyCtrl () {
  $scope.myForm = {};

  $scope.initForm = function(form) {
    // Here you are assigning the form instance to your $scope variable
    $scope.myForm = form;

    //$scope.myForm.$pristine = true;
    //$scope.myForm.$dirty = true; 
    //etc...
  }
}

【讨论】：

我在表单中添加了以下两项：
连同它们的功能： $scope.initCardForm = function(form) { $scope.myForm = form; $scope.myForm.$setPristine(); } $scope.resetCardForm = function(form) { $scope.myForm = form; $scope.myForm.$setPristine();重置按钮有效，但初始化无效。相信这可能与初始化时的模态加载有关，它不会在每次调用模态时都初始化
我试过了，每次打开该模式时都会调用ng-init。你在使用普通的 bootstrap.js 模式吗？也许你应该使用angularjs ui boostrap。它会让你的生活更轻松。
是的，我们只是使用普通的引导程序。不幸的是，对于这个问题，它足够小，不值得更换引导框架，但你肯定回答了这个问题。感谢您的帮助。

【解决方案2】：

感谢The.Bear 的帮助，我能够想出一种方法来完全满足我的需要。在我的例子中，div 上的 init 仅在加载整个页面时被调用一次，而不是每次调用模态时。但是，利用 The.Bear 的示例，我能够在每次关闭模式时将表单设置为原始：

HTML

<div id="myModal6" class="modal fade" role="dialog">
...
  <form name="myForm" class="col-lg-12" novalidate>
    <div ng-init="initForm(myForm)"></div>
    <!-- rest of the form -->
  </form>
...
</div>

控制器

$scope.initCardForm = function(form) {
    console.log("garfield");
    $scope.myCardForm = form;
    $scope.myCardForm.$setPristine();

    $('#myModal6').on('hidden.bs.modal', function () {
        $scope.resetCardForm();
    })
}

$scope.resetCardForm = function() {
    console.log("heathcliff");
    $scope.myCardForm.$setPristine();
}

【讨论】：