Question

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

<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。

Answer 1

简短回答：是的，你可以。你可以用ng-init做一个小技巧并将表单实例传递给控制器。（PLUNKER）

<强> HTML

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

<强> CONTROLLER

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...
  }
}

Answer 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>

<强> CONTROLLER

$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();
}

在不使用重置按钮单击的情况下将表单设置为在AngularJS中未提交

2 个答案: