양식 내에서 버튼을 클릭하면 페이지를 새로 고칩니다.

217

Angular에는 두 개의 단추 태그가있는 양식이 있습니다. 하나의 버튼이에 양식을 제출합니다 ng-click. 다른 버튼은 순전히을 사용한 탐색 용 ng-click입니다. 그러나이 두 번째 버튼을 클릭하면 AngularJS가 404를 트리거하는 페이지 새로 고침을 발생시킵니다. 함수에 중단 점을 삭제하고 함수가 트리거됩니다. 다음 중 하나를 수행하면 중지됩니다.

를 제거해도 ng-click버튼이 페이지를 새로 고치지 않습니다.
함수에서 코드를 주석 처리하면 페이지를 새로 고치지 않습니다.
로 버튼 태그를 앵커 태그 ( <a>)로 변경하면 href=""새로 고침이 발생하지 않습니다.

후자는 가장 간단한 해결 방법 인 것처럼 보이지만 AngularJS가 페이지를 다시로드하게하는 함수 후에 코드를 실행하는 이유는 무엇입니까? 버그 인 것 같습니다.

형식은 다음과 같습니다.

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
    </div>
  </fieldset>
</form>

컨트롤러 방법은 다음과 같습니다.

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

javascript angularjs

— chubbsondubs
소스

이것이 github.com/angular/angular.js/issues/1238 문제 인지 확인하십시오 (불행히도,이 수정 프로그램이 1.0.1 릴리스인지 여부를 알 수있을만큼 github에 대한 방법을 모르겠습니다) .

— Mark Rajcok

나는 그 것을 보았지만 위치를 변경하지 않으므로 적용되지 않는다고 생각합니다. 이 다른 버튼으로 인해 제출이 발생하지 않는 한 제출 유형으로 정의되지 않았으며 ng-click을 해제하면 버튼이 양식을 제출하지 않습니다.

— chubbsondubs

이 문제에 대한 실습 데모를 제공 할 수 있다면 좋을 것입니다. 아마 시작 : Angular Plnkr

— Pete BD

의 속는 stackoverflow.com/questions/932653/...

— 로이 Truelove입니다에게

중복 된 것 같습니다. stackoverflow.com/questions/16703215/…

— Vaibs

471

W3C 사양을 살펴보면 버튼 요소 type='button'를 제출하지 않으려는 경우 버튼 요소를 표시하는 것이 분명 합니다.

특히 주목해야 할 것은

type 속성이 지정되지 않은 버튼 요소는 type 속성이 "submit"으로 설정된 버튼 요소와 동일한 것을 나타냅니다.

— LOAS
소스

4

OP와 동일한 문제가 있지만 버튼의 유형이 지정되어 있으며 클릭하면 새로 고침이 발생합니다. 내가 볼 수있는 다른 곳이 있습니까?

— Mateo Velenik 2013

그것은 당신의 문제가 자바 스크립트에 있다고 제안합니다. 내 대답이 해결하는 문제는 DOM과 브라우저 사이의 문제입니다. 버튼 클릭을 처리하는 일부 자바 스크립트로 인해 새로 고침이 발생할 수 있습니다. 행복한 사냥;)

— LOAS

이것이 바로 내가 찾던 것입니다. 내 페이지에서 오류가 발생하고 제출하지 않아야하기 때문에 매우 성가시다.

— reaper_unique

type = "button"으로 표시된 버튼이 있고 문제도 있습니다. 내 ng-click 핸들러에는 $ event.stopPropagation ()이 있습니다. 제거해도 다시로드되지 않습니다. 그래도 필요합니다. 왜 페이지가 새로 고침되는지 생각하십니까?!

— felixfbecker

@ freshfelicio : 또한 $event.preventDefault()내 경우에 도움이되는을 추가하십시오 . 그러나 나는 왜 설명이 없다 :-\

— Tim Büthe

72

기본 처리기를 방지하려고 할 수 있습니다.

html :

<button ng-click="saveUser($event)">

js :

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

— 개미
소스

좋은! 실제로 내 시나리오로 가져 왔습니다!

— Richard

2

이것은 SharePoint 양식 내에서 AngularJS를 사용할 때 효과적이었습니다. "event.stopPropagation ();"을 추가해야했습니다. 그래도

— Nick DeMayo

19

태그 에서 속성 ng-submit={expression}을 선언해야 합니다 <form>.

ngSubmit 문서에서 http://docs.angularjs.org/api/ng.directive:ngSubmit

이벤트를 제출할 때 각도 표현식을 바인딩 할 수 있습니다.

또한 기본 조치를 방지합니다 (형식의 경우 서버에 요청을 보내고 현재 페이지를 다시로드하는 것을 의미 함).

— 셰인 스틸 웰
소스

3

또한 'action'속성이 form (action = "/ login", lng-submit = "login ()") 형식으로 설정되어 있지 않은지 확인하십시오. ng-submit이 설정되어 있어도 페이지를 새로 고치게됩니다. .

— jenso

양식 제출 및 기본 조치 방지 클라이언트 측 Angular 애플리케이션에서 양식의 역할이 클래식 왕복 앱과 다르기 때문에 브라우저가 양식 제출을 서버로 데이터를 전송하는 전체 페이지 다시로드로 변환하지 않는 것이 바람직합니다. . 대신 애플리케이션 특정 방식으로 양식 제출을 처리하기 위해 일부 자바 스크립트 로직을 트리거해야합니다. 이러한 이유로 Angular는 <form> 요소에 action 속성이 지정되어 있지 않으면 기본 조치 (서버에 양식 제출)를 방지합니다. - docs.angularjs.org/api/ng.directive:form

— Jignesh Gohel

ng-submit = {expression} 양식과 type = "submit"버튼이 있습니다. BB10을 제외하고는 잘 작동합니다. BB10 키보드의 제출을 사용하면 페이지가 새로 고쳐집니다. 양식에서 선언 한 버튼을 사용하면 정상적으로 작동합니다.

— Michael

이것은 나를 위해 작동하지 않습니다. 나는 지시를 정확히 따랐다. 다시 여전히 페이지 게시물

— meffect

18

기본 동작을 방지하기 위해 지시문을 사용합니다.

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

그런 다음 html로 :

<button class="secondaryButton" prevent-default>Secondary action</button>

이 지시어는 <a>다른 태그 와 함께 사용할 수도 있습니다

— 플리 락
소스

+1 감사합니다! <form>태그에 액세스 할 수 없어서 ng-submit지시문을 사용할 수없는 경우에 유용합니다 .

— jackvsworld

이것에 대해 고마워하지만 지시문에서 ng-click을 취소해야합니다.

— boi_echos

이것은 또한 폼이 ng-submit 콜백을 트리거하는 것을 방지합니다.

— Jhourlad Estrella

5

를 유지할 수는 <button type="submit">있지만의 속성 action=""을 제거해야합니다 <form>.

— 앤더슨 페레이라
소스

2

아무도 왜 가장 간단한 해결책을 제안하지 않았는지 궁금합니다.

사용하지 마십시오 <form>

A <whatever ng-form>는 IMHO가 더 나은 작업을 수행하며 HTML 양식이 없으면 브라우저 자체에서 제출할 내용이 없습니다. 각도를 사용할 때 정확히 올바른 행동입니다.

— 마 아티누스
소스

클릭 한 다음 form 태그없이 formvalid를 시행하는 방법은 무엇입니까?

— Rizwan Patel

1

@RizwanPatel I 추측, 나는 이해하지 않지만, 함께 ng-form=someForm, 당신은 얻을 $scope.someForm과 그것이 가지고 $valid필드. 그래서 나는 필요한 모든 것을 얻습니다 <button ng-disabled="!someForm.$valid">.

— maaartinus

1

양식에 조치를 추가하십시오.

<form action="#">

— 스왑 닐 팻와
소스

1

이 답변은 질문과 직접 관련이 없을 수도 있습니다. 스크립트를 사용하여 양식을 제출하는 경우에만 해당됩니다.

ng-submit 코드 에 따르면

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

스 니펫 확장

양식에 제출 이벤트 리스너를 추가합니다. 그러나 form.submit ()을 호출하여 제출이 시작되면 제출 이벤트 핸들러가 호출되지 않습니다. 이 경우 ng-submit은 기본 동작을 방해하지 않으므로 ng-submit 핸들러에서 preventDefault를 직접 호출해야합니다.

합리적으로 결정적인 답변을 제공하기 위해 HTML 양식 제출 알고리즘 항목 5는 양식이 제출 메소드를 호출하여 제출되지 않은 경우에만 제출 이벤트를 발송한다고 명시합니다 (즉, 단추 또는 기타 암시 적으로 제출 된 경우에만 제출 이벤트를 전달 함을 의미 함) 예를 들어 포커스가 입력 유형 텍스트 요소에있는 동안 Enter 키를 누르는 방법).

링크에서 submit ()을 사용하여 제출 된 양식은 onsubmit 핸들러가 잡을 수 없음을 참조하십시오

— 사용자 1577263
소스

0

첫 번째 단추는 양식을 제출하고 두 번째 단추는 양식을 제출하지 않습니다.

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>

— 아마이 쿨 카르 니
소스

0

단지를 추가 FormsModule에 imports배열 app.module.ts파일 및 추가 import { FormsModule } from '@angular/forms';이 파일의 상단에 ...이 작동합니다.

— 사힐 샤르마
소스