Question

我有一个表单，表示一个对象和一个包含在转发器中的子对象数组。我想动态地将子对象添加到数组中。当我添加一个子对象时，表单会被意外提交。

见这个例子：

http://plnkr.co/edit/TUblgmb7N710nPL7s5tU?p=preview

我的表单如下：

<form ng-submit="handleSubmit()" ng-controller="TestController">
  <div>Some Input: <input type="text"></div>  

  <div ng-repeat="obj in model.children">
    <input type="text" ng-model="obj.text" />
  </div>

  <button ng-click="addChild()"> Add Child</button>

</form>

控制器看起来像这样......

Controllers.controller('TestController', ["$scope", function($scope) {

  $scope.model = {
    name: "Some Text",
    children: []
  };

  $scope.handleSubmit = function() {
    alert("Form Submitted!");
  }

  $scope.addChild = function() {
    $scope.model.children.push({text:"Foo"});
  }


}]);

单击“添加孩子”按钮。 UI按预期更新，但表单已提交。

我可以解决这个问题，方法是将“提交”功能放在“保存”按钮上，而不是在表单上使用ng-submit，但这似乎是意外行为。谁能解释一下？

Answer 1

默认属性类型 HTML按钮标记<button>My Button</button>会触发提交事件，如<input type = "submit"...>所示。

现在，按照@GruffBunny的想法，我在你的方法中添加了一个pInputType参数来显示点击的按钮：

$scope.addChild = function(pInputType) {
    $scope.model.children.push({text:"Foo", inputType : pInputType });
}

然后在HTML块中，在循环中添加了属性inputType，如下所示：

<div ng-repeat="obj in model.children">
   <hr />
   <h3>{{obj.inputType}}</h3>
   <div>New Input: <input type="text" ng-model="obj.text" /></div>
</div>

最后，这是用于测试代码的按钮：

<!-- With Input Type -->
<h2>Input type Button</h2>
<input type="button" ng-click="addChild('Input type Button')" value="Btn Add Child" />
<hr />
<!-- With Normal Anchor -->
<h2>HTML Anchor</h2>
<a href="#" ng-click="addChild('HTML Anchor')">Add Child Link</a>
<hr />
<!-- Adding Bootstrap -->
<h2>HTML Bootstrap Anchor</h2>
<a href="#" ng-click="addChild('HTML Bootstrap Anchor')" class="btn btn-info"> Add Child Link</a>
<hr />
<!-- Button Tag -->
<h2>HTML Button Tag (Triggers SUbmit Events)</h2>
<button ng-click="addChild('Triggers Submit Events')">Add Child</button>
<hr />

以下是完整的plunker：http://plnkr.co/edit/N4hSjG

有关此行为的详细信息，您可以阅读此Stack Overflow问题：<button> vs. <input type="button" />. Which to use?

我希望这对任何人都有用。

AngularJS在Repeater中动态添加控件以形成原因提交

1 个答案: