26

3 つのボタンがあるフォームを考えてみましょう。

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
    <button class="btn" ng-click="cancelEdit()">Cancel</button>
    <button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

キャンセルをクリックすると、cancelEdit() が呼び出され、次に updateUser() が呼び出されます。updateUser() メソッドを呼び出したくありません。このフォームの送信を抑制する方法はありますか (できれば jQuery なしで?)

注: Enter キーを押して、デフォルトで [保存] アクションを実行できるようにしたいと考えています。

4

4 に答える 4

97

デフォルトでサブミットtypeする属性があります-この仕様を参照してください。したがって、フォームのすべてのボタンは送信ボタンです。次のように、フォーム送信をトリガーしないボタンのボタンタイプを指定する必要があります。<button>

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary">Save</button>
    <button type="button" class="btn" ng-click="cancelEdit()">Cancel</button>
    <button type="button" class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

また、送信アクションを両方に配置する必要はありませんng-click-ng-submit二重送信がトリガーされます。ng-submit送信ボタンをクリックするだけでなく、ENTERを押すなど、フォーム送信のすべての方法をキャッチするため、使用することをお勧めします。

お役に立てれば ：）

于 2013-07-14T08:21:26.697 に答える
13

これを試して

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary">Save</button>
    <a class="btn" ng-click="cancelEdit()">Cancel</a>
    <a class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</a>
  </div>
</form>

またはこれ

<form>
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
    <button class="btn" ng-click="cancelEdit()">Cancel</button>
    <button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

updateUser()最終的には、html で 2 回必要とは思わない

于 2013-04-16T04:22:08.943 に答える
6

キャンセルボタン type="reset" に使用できます:

<button type="reset" class="btn" ng-click="cancelEdit()">Cancel</button>

ボタンはリセットボタンです（フォームデータを初期値にリセットします）

http://www.w3schools.com/tags/att_button_type.asp

于 2015-09-23T09:30:30.463 に答える
1

ボタンの代わりにアンカーを使用しました。

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
<a class="btn btn-danger"  ng-click="cancelEdit()" role="button">Cancel</a>
    <button class="btn btn-primary" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>

  </div>
</form>
于 2016-09-28T06:19:53.937 に答える