Angular.js: ngSubmit은 type="button"이 없는 모든 버튼에서 양식 제출을 시작합니다.

에 만든 2014년 01월 28일 · 13코멘트 · 출처: angular/angular.js

Angular가 내 양식을 두 번 제출하는 문제가 발생했습니다.

        <div class="text-center">
          <input type="submit" class="btn btn-primary" value="Create" />
          <button class="btn btn-primary" ng-click="close()">Close</button>
        </div>

여기에 있는 두 버튼 모두 양식을 제출하므로 이중 제출이 발생합니다. 문제는 type="button"이 아닌 모든 버튼에서 양식을 제출하는 각도와 관련이 있다는 것을 알고 있습니다. 닫기 버튼에 해당 속성을 추가하면 문제가 해결됩니다. 의도한 것인지는 모르겠지만 주의를 기울이기로 결정할 때까지 당황스러웠습니다.

forms low inconvenient

출처

parliament718

👍21

가장 유용한 댓글

나는 이것에 시간을 낭비했습니다 ...

ng-submit은 type="submit"이 명시적으로 설정된 버튼에 대해서만 실행되어야 합니다.

soichih 에 2014년 07월 31일

👍81 👎6 ❤5

모든 13 댓글

이것이 문서에 설명되어 있다고 생각하지만 puttint type="button"으로 제출을 방지할 수 있다는 언급은 없습니다.

양식에 하나 이상의 입력 필드와 하나 이상의 버튼 또는 input[type=submit]이 있는 경우 입력 필드 중 하나에서 Enter 키를 누르면 첫 번째 버튼 또는 입력 type=submit 에서 클릭 핸들러가 트리거되고 입력 필드에서 제출 핸들러가 트리거됩니다. 동봉 양식(ngSubmit)

Narretz 에 2014년 01월 28일

👍43 ❤8 🎉4 👀1

나는 이것에 시간을 낭비했습니다 ...

ng-submit은 type="submit"이 명시적으로 설정된 버튼에 대해서만 실행되어야 합니다.

soichih 에 2014년 07월 31일

👍81 👎6 ❤5

그건 .... html이 작동하는 방식이 아닌가요?

caitp 에 2014년 07월 31일

👍12

아, 이것은 HTML 양식이 기본적으로 제출 버튼으로 모든 버튼을 처리하는 방식입니다. Angular와 아무 관련이 없습니다(Angular는 ng-submit을 실행하기 위해 양식 제출 이벤트를 사용합니다. 이는 의미가 있습니다). 왜 type="submit"이 존재해야 하는지 궁금합니다.

어쨌든.. 제출 버튼이 아닌 한 모든 버튼에 type="button"을 추가하도록 하겠습니다.

soichih 에 2014년 07월 31일

👍23 😄3

@soichih - 네, 맞습니다. ngSubmit은 submit 이벤트에 반응할 뿐이며 브라우저는 이를 트리거할 책임이 있습니다.

실제로 이러한 상황이 발생할 수 있는 여러 시나리오가 있습니다.

핸들러의 이중 실행을 방지하려면 ngSubmit 또는 ngClick 지시문 중 하나만 사용하십시오. 이는 HTML 사양의 다음 양식 제출 규칙 때문입니다.
양식에 입력 필드가 하나만 있는 경우 이 필드에 Enter 키를 누르면 양식 제출(ngSubmit)이 트리거됩니다.
양식에 2개 이상의 입력 필드가 있고 버튼이나 input[type=submit]이 없는 경우 Enter 키를 눌러도 제출이 트리거되지 않습니다.
양식에 하나 이상의 입력 필드와 하나 이상의 버튼 또는 input[type=submit]이 있는 경우 입력 필드 중 하나에서 Enter 키를 누르면 첫 번째 버튼 또는 입력 type=submit 에서 클릭 핸들러가 트리거되고 입력 필드에서 제출 핸들러가 트리거됩니다. 동봉 양식(ngSubmit)

여기에 문서화되어 있습니다: https://docs.angularjs.org/api/ng/directive/form
ngSubmit 문서에서 복제하거나 더 명시적으로 참조해야 합니다.