AngularJS를 사용하여 프로그래밍 방식으로 양식을 제출하는 방법

Question

양식 제출 시점을 감시하는 특수한 유형의 제출 단추에 대한 지시문을 작성한 다음 해당 단추를 사용할 수 없도록하고 멋진 애니메이션 진행률 막대를 가져옵니다.

제출 단추를 누르거나 필드 중 하나에서 Enter 키를 눌러 양식을 제출하면 onsubmit 처리기가 올바르게 호출됩니다.

문제 : 내 양식 중 하나에서 사용자가 Enter 키를 누를 때 제출할 텍스트 영역이 있습니다. 그래서 나는 onEnter 지시어를 만들었습니다. 지시문은 올바른 키 누르기를 찾고 함수를 실행합니다.

물론이 문제는 onsubmit 처리기를 트리거하지 않으므로 버튼이 비활성화되지 않았거나 아무것도 아닙니다. 어떻게 해결할 수 있을까요? document.form.submit()과 같은 것을 시도했지만, 구식 HTML 방식으로 양식을 제출합니다. 물론 모든 Angular/JS 코드와 핸들러를 우회 할 수 있습니다. 제출 버튼을 찾아서 클릭 시뮬레이션을해야합니까? 그것은 너무 hackish 느낀다.

슬프게도 $scope.form은 아무 것도 제출하지 않아도됩니다.

편집 1 : 문제가 분명하기 때문에 예, controller.submit() 함수는 on-enter 지시문을 통해 올바르게 호출됩니다. 그러나 양식은 내 버튼이 수신 대기중인 제출 이벤트를 수신하지 않습니다.

편집 2 : Here is a gist with my button directive. 버튼에 현재 "pb-click" 속성이 필요하거나 해당 양식에 "pb-submit" 속성이 필요합니다. 이러한 함수는 약속을 반환해야합니다.

이 논리를이 함수에서 설정 한 범위 변수로 이동하면 큰 문제가되지 않을 수 있습니다. 표준 ng-click 및 ng-submit을 사용할 수 있으므로 약속을 반환하지 않아도되기 때문입니다. 다른 한편으로는 한 페이지에 5 개의 단추가 있으면 5 개의 범위 변수를 만들어야합니다. 최고의 아이디어도 아닙니다. 또는 pb-click을 계속 사용하고 양식의 경우 범위 변수를 사용 하시겠습니까?

Answer 1

나는 FormController에에 $submit 방법을 추가하여이를 관리했습니다 : 그런 다음 컨트롤러에서 $scope.myForm.$submit($scope)를 호출하여 폼의 ng-submit 표현을 호출 할 수 있습니다

module.directive('form', function($parse) { 
    return { 
     require: 'form', 
     restrict: 'E', 
     link: function(scope, element, attrs, formController) {   
      formController.$submit = $parse(attrs.ngSubmit); 
     } 
    }; 
}); 

.

Answer 2

aikoven의 답변에있는 $parse이 나를 위해 작동하지 않는 것 같아서 대신 scope.$eval을 사용하도록 수정했습니다. 또한 form.$setSubmitted()을 추가 했으므로 양식을 제출 한 후 양식이 올바르게 .ng-submitted 클래스를 얻습니다.

app.directive('form', function() { 
    return { 
     require: 'form', 
     restrict: 'E', 
     link: function(scope, elem, attrs, form) { 
      form.$submit = function() { 
       form.$setSubmitted(); 
       scope.$eval(attrs.ngSubmit); 
      }; 
     } 
    }; 
});