ng-submit，删除表单，“表单提交因表单未连接而取消”答案

【问题标题】：ng-submit, removing a form, and "Form submission canceled because the form is not connected"ng-submit，删除表单，“表单提交因表单未连接而取消”
【发布时间】：2018-02-15 14:30:17
【问题描述】：

我正在使用 angular 1，并尝试在使用 ng-click 或 ng-submit 提交表单时设置一个变量。然后该变量使用 ng-if 级联并从 DOM 中删除表单。但是，我遇到了chrome错误消息“由于表单未连接而取消表单提交”，并且没有发布表单。

这是一个完整的 MWE：

<html>
  <head>
    <title>Something</title>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <div ng-if="status.value=='ok'">
        <form action="url" method="post" target="_blank">
          <button type="submit" ng-click="status.value='newwindow'">Open in new window</button>
        </form>
      </div>
      <div>{{status}}</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
      var app = angular.module('myApp', []);
      var ctrl = app.controller('myCtrl', ['$scope', function($scope) {
        $scope.status = {'value':'ok'};
      }]);
    </script>
  </body>
</html>

每当我完全删除 ng-* 属性时，表单都会正常提交，但变量不会更新。

关于如何将表单保留足够长的时间以发布它的任何建议？

【问题讨论】：

快速谷歌搜索表明您的错误是由于表单元素不是 DOM 的一部分。请包含您的所有 HTML 和 Angular 代码，以获得调试帮助。
我看到了。乍一看，该表单显然是 DOM 的一部分，但我还是把它放在了一个精简的版本中。将一个完整的 MWE 放在一起后，看起来 ng-* 事件实际上是在表单发布之前删除了表单......请参阅更新的问题。
ng-click 应该引用一个函数
根据the AngularJS docs，ng-click 评估表达式很好。
不确定你的用例是什么，但试试ng-show而不是ng-if，它只是隐藏元素而不是从DOM中删除它。

标签： angularjs forms

【解决方案1】：

您的代码中的问题是ng-if 语句。当您单击该按钮时，status.value 会立即更新，从而导致$digest 循环。 $digest 循环导致 ng-if 变为 false，这会从 DOM 中删除整个 div（包括表单）。

一种可能的解决方法是使用ng-show 而不是ng-if，这只是隐藏元素，但不会将其从 DOM 中移除。

另一种可能性是将ng-click 附加到处理所有表单提交逻辑的函数，甚至可能使用event.preventDefault() 抑制默认提交。

【讨论】：

叹息。它实际上是一个 ng-switch，它正在更改我的代码中的内容（并且需要更改 DOM），但是 ng-if 为 MWE 提供了一个很好的案例。所以，我没有 sg-show。听起来我需要手动提交表单。
是的，我不知道如何使用 ng-switch 并保持表单完整。
非常感谢@Claies 的建议。如果其他人需要手动提交表单，我发现这个问题非常有帮助：stackoverflow.com/questions/29823626/…

【解决方案2】：

<html>
  <head>
    <title>Something</title>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <div ng-if="status.value=='ok'">
        <form action="url" method="post" ng-submit="formSubmit()" target="_blank">
          <button type="submit" ng-click="status.value='newwindow'">Open in new window</button>
        </form>
      </div>
      <div>{{status}}</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
      var app = angular.module('myApp', []);
      var ctrl = app.controller('myCtrl', ['$scope', function($scope) {
        $scope.status = {'value':'ok'};
$scope.formSubmit=function(){
//here you can write you business logic here
};
      }]);
    </script>
  </body>
</html>

或者你也可以写：

 <form action="url" method="post"  target="_blank">
              <button type="submit" ng-click="postData()">Open in new window</button>
            </form>

在您的控制器中：

$scope.postData=function(){
//logic will be here:
}

【讨论】：