Angular JS - 양식 억제 제출 취소 버튼

Angular JS - 양식 억제 제출 취소 버튼

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()가 호출됩니다.update User() 메서드를 호출하고 싶지 않습니다.이 폼의 제출을 억제하는 방법이 있습니까(wtihout jQuery를 사용하는 것이 좋습니다).

참고: Enter 키를 눌러 Save(저장) 액션을 기본화할 수 있습니다.

이 있습니다.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-submitENTER를 누르거나 Submit 버튼을 클릭하는 것뿐만 아니라 폼 제출의 모든 방법을 포착하기 때문입니다.

이거 드셔보세요

<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에서 두 번

취소 버튼 타입="cancel"에 사용할 수 있습니다.

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

이 버튼은 리셋버튼입니다(폼데이터를 초기값으로 리셋합니다).

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

저도 같은 문제가 있었어요.버튼 대신 앵커를 사용했어요.

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

언급URL : https://stackoverflow.com/questions/16028695/angular-js-cancel-button-on-form-suppress-form-submission