2014-06-12 6 views
1

이 질문에 대한 스레드가 많이 있지만, 제 생각에는 조금 다릅니다.event.preventDefault with Firefox and AngularJS

배경 : 나는 각도 JS를 사용하여 양식을 제출합니다. 내 GSP

<form action="formAction" class="form-horizontal" id="UserForm" name="UserForm" 
      useToken="true" ng-app="angularApp" ng-controller="angularController" novalidate="" ng-submit="onSubmitClick();"> 


<input type="button" name="next" value="submit" 
           id="submit" /> 

에 다음과 같은 그루비 태그가 (그루비에서 실제로 제출 태그하지만 StackOverflow의 날이를 작성할 수 나던) 제출 NG 지정이 활동하고있는 폼 태그입니다

.

것은 내가 달성하기 위해 노력하고 일 : 버튼을 제출

클릭 "onSubmitButtonClick()"함수를 호출되고 형태가 무효 인 경우는 제출 방지 할 필요가있다.

onSubmitButtonClick은 각도 컨트롤러에 정의되어 있습니다. 이제 Angular JS는 "조치"URL이 정의 된만큼 양식을 제출할 것입니다. 런타임시 서버 측에서 오는 URL이므로 값을 제거 할 수 없습니다. 그래서 event.preventDefault()를 사용하기 시작했습니다.

event.preventDefault는 Firefox에서 작동하지 않으므로 onSubmitButtonClick (이벤트) 함수 호출에서 이벤트를 전달하기 시작했습니다. Firefox의 경우이 값은 정의되지 않은 것으로 나타납니다.

그래서, 파이어 폭스에서 이벤트에 액세스 할 수있는 방법이 있습니까? Angular가 무시하기 때문에 'return false'나 event.returnValue = false를 사용할 수 없습니다. 그래서, 나는 event.preventDefault를 작동시킬 필요가있다. 다음은

코드 모양을 onSubmitButtonClick입니다 같은 :

$ scope.onSubmitButtonClick = 기능 (EVT) { 경우 ($ scope.UserForm $의 무효.) {

var browserObj=browserDetectFunction(); 
    if(browserObj.browser=='Firefox') 
    { 
      evt.preventDefault(); // this throws evt undefined error in Firefox 
    } else 
    { 
     event.preventDefault(); 
    } } } 

어떤 도움을 주셔서 감사합니다. 감사합니다

답변

0

아니 정확하게 귀하의 질문에,하지만 작동합니다 데리고 다른 경로 (코드)를 찾고 응답 :

<input type="button" name="next" value="submit" 
          id="submit" ng-disabled="UserForm.$invalid" /> 

을 또는 유효하지 않은 경우가 제출 '버튼을 제거하고 비로 교체 작동하는 버튼 :

<input type="button" name="next" value="submit" 
          id="submit" ng-if="UserForm.$valid" /> 
<button type="button" name="next" value="submit" 
          ng-if="UserForm.$invalid" /> 
+0

답장하는 데 시간이 걸렸으나 버튼을 비활성화 할 수 없어서 고맙습니다. 그것은 비즈니스 요구 사항입니다. – greengrassbluesky

+0

그냥 명확하다. 비즈니스 요구 사항은 양식이 유효하지 않은 경우 양식을 제출하지 않고 버튼을 사용 불가능하게 만드는 버튼을 만드는 것입니다. – dave

+0

예, 이상하게 들리지만 예. 요구 사항을 충족합니다. 양식이 유효하지 않을 때 사용자가 버튼을 클릭하면 양식이 유효하지 않음을 더욱 분명하게하기 위해 CSS를 적용해야합니다. 버튼은 항상 활성화되어 있어야합니다. – greengrassbluesky