컨트롤러에서 폼 제출을 트리거할 수 있습니까?

컨트롤러에서 폼 제출을 트리거할 수 있습니까?

컨트롤러 내에서 기존 양식을 제출하고 싶습니다.웹 서버상의 루트를 히트시켜, 그 응답으로 리다이렉트 하는 시나리오입니다.HTML 의 통상의 형식에서도 할 수 있습니다만, 송신 버튼을 눌렀을 때에 필드에 대한 검증을 실시하고, 검증에 실패했을 경우는 루트를 실행하고 싶지 않습니다.

ng-valid는 알고 있습니다만, 버튼이 눌렸을 때만 검증이 이루어졌으면 합니다.

컨트롤러 내에서 조건부로 폼을 제출하는 방법이 있습니까?

Form Controller 에 송신 방식을 추가할 수 있습니다.나는 그렇게 했다:

<form ng-form-commit action="/" name='payForm' method="post" target="_top">
    <input type="hidden" name="currency_code" value="USD">
    <button type='button' ng-click='save(payForm)'>buy</button>
</form>

.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function() {
                $el[0].submit();
            };
        }
    };
}])

.controller("AwesomeCtrl", ["$scope", function($scope){
   $scope.save = function($form) {
     if ($form.$valid) {
         $form.commit();
     }
   };
}])

양식에 ng-submit 지시문을 사용해보셨습니까?확인 후 true/false를 반환할 수 있습니다.

컨트롤러

app.controller('MainCtrl', ['$location', function($scope, $location) {
  $scope.submit = function(user) {
    var isvalid = true;
    // validation 
    if (isvalid) {
        $http.get('api/check_something', {}).then(function(result) {
            $location.path(result.data);
        });
        return true;
    }
    return false; //failed
  }
});

Html(액션 속성을 가질 수 없습니다)

<form name="formuser" ng-submit="submit(user)">
    <input type="text" ng-model="user.firstname" />
    <input type="text" ng-model="user.lastname" />
    <button type="submit">Submit</button>
</form>

이것은 Angular의 방법이 아니지만, vanilla javascript를 사용하여 양식을 제출할 수 있습니다.예를 들어 양식에 ID를 지정하고 다음을 수행할 수 있습니다.

document.getElementById('myForm').submit()

송신 버튼이 있는 경우는, 클릭할 수 있습니다.

document.getElementById('myForm-submit').click()

첫 번째 바인딩은 데이터 바인딩을 유지하지 않았지만(나는 Angular 대안이 없는 JQuery 위젯을 사용하는 프로젝트에서 사용하고 있었다) 두 번째 바인딩은 유지했습니다.JQuery 위젯 작성 방법과 관련이 있을 것 같습니다.

바닐라 JS를 사용하여 폼을 트리거하는 방법에 대한 자세한 내용은 여기를 참조하십시오.

javascript를 사용하여 양식을 제출하려면 어떻게 해야 합니까?

$scope.payForm.$setSubmitted();

폼을 $submitted 상태로 설정합니다.또한 폼의 모든 자녀 및 부모 양식에 $submited가 설정됩니다.

https://docs.angularjs.org/api/ng/type/form.FormController#$setSubmitted

폼이 유효해질 때까지 [전송]버튼을 바로 비활성화하면 됩니다.

<button type="submit" ng-disabled="form.$invalid">Submit</button>

이 비슷한 질문을 한 번 보세요. 각도:지시문을 사용한 JS 폼 검증 - "myform.$valid"는 적합하지 않습니다.

@ReklatsMasters의 답변에서 확장하면 폼을 전송하기 전에 값을 변경할 수 있습니다.

<form ng-form-commit action="/" name='payForm' method="post" target="_top">
    <input type="hidden" id="currency_code" name="currency_code" value="USD">
    <button type='button' ng-click='save('GBP', payForm)'>buy</button>
</form>

.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function($newCurrency) {
                $el[0].querySelector('#currency_code').value = $newCurrency;
                $el[0].submit();
            };
        }
    };
}])

.controller("AwesomeCtrl", ["$scope", function($scope){
   $scope.save = function($newCurrency, $form) {
     if ($form.$valid) {
         $form.commit($newCurrency);
     }
   };
}])

언급URL : https://stackoverflow.com/questions/16003188/can-i-trigger-a-form-submit-from-a-controller