유효성 검사 오류에도 불구하고 제출 된 각도 양식

Question

Angular.js가있는 양식을 작성한 후 제출하기 전에 입력해야합니다. 유효성 검사가 올바르게 작동하지만 (양식을 제출할 때 필드에 유효성 검사 오류가 표시됨) 양식이 여전히 ng-click 조치를 수행하는 것처럼 보입니다.

유효성 검사 오류에도 불구하고 각도 형식을 제출해야합니까? 유효성 검사 오류가있는 경우 제출하지 못하게하는 가장 좋은 방법은 무엇입니까? 여기

문제의 형태입니다 :

<form role="form"> 
    <div class="form-group"> 
     <label>Book Id</label><br> 
     <input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text"> 
    </div> 
    <button type="submit" ng-click="sendBookUpdate(BookToSend)">Send Book Update</button> 
</form> 

Answer 1

각도 양식을 방지하지 않습니다 가질 때까지 당신은 버튼을 비활성화 할 수

https://docs.angularjs.org/api/ng/directive/ngSubmit

Answer 2

편집 : 나는 대답 아래 썼을 때, 나는 ngClick 그 각도 어떤 양식 제출 처리기에서 완전히 분리했다는 가정하에

했다 사용. 그러나 나는 아래의 코멘트 에서처럼 잘못되었다. 나는 그 부정확성에도 불구하고이 대답을 계속 지키고 내가 갖고있는 오해와 함께오고있는 사람들에게 알려 주겠다. 적어도 나에게는 제출 처리자로 ng-click double을 두는 것이 반 직관적이다. . 폼의 핸들러를 제출하고 당신이 상관없이이 유효성 검사를 통과 여부의 버튼을 클릭 할 때마다 실행됩니다에서

---

겨 클릭은 별개입니다.

문제의 해결책은 sendBookUpdate (BookToSend)를 가져 와서 양식 자체의 ng-submit 속성에 배치하는 것입니다. 아래 코드를 참조하십시오.

<form role="form" ng-submit="sendBookUpdate(BookToSend)"> 
    <div class="form-group"> 
     <label>Book Id</label><br> 
     <input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text"> 
    </div> 
    <button type="submit">Send Book Update</button> 
</form> 

도움이되는지 알려주세요.

편집 : 양식이 유효한 데이터

<button type="submit" data-ng-disabled="form.$invalid">Send Book Update</button> 

Answer 3

:

는 여기에 몇 가지 추가 정보를 원하시면 관한 ngSubmit입니다 유효성 검사 오류가있을 때 제출하는 것.

실제로 붙여 넣은 스 니펫을 사용하면 기본적으로 오류 확인이 html5와 함께 제공되기 때문에 오류가 표시됩니다. https://docs.angularjs.org/guide/forms

은 기본적으로 당신이 당신의 형태 이름을 가지고 :

당신은 문서를 확인해야합니다

<form name="myForm" role="form"> 

을 그리고 당신은 당신의 컨트롤러 내부에 제출에서 양식을 방지 할 수 있습니다 :

$scope.sendBookUpdate(BookToSend, form) { 
    if (form.$invalid) { 
    return; // and add any error to the view if you want 
    } 

    ... 
} 

다른 옵션은보기에서 제출하지 못하도록하는 것입니다.

<form name="myForm" role="form" ng-submit="myForm.$valid && sendBookUpdate(BookToSend)">