Могу ли я инициировать отправку формы с контроллера?

Я хотел бы подать традиционную форму из контроллера. Сценарий заключается в том, что я хочу ударить по маршруту на своем веб-сервере и перенаправить на его ответ, который я могу сделать с обычной формой в HTML, но я также хочу сделать некоторые проверки в своих полях при нажатии кнопки отправки и если проверка не удалась, я не хочу выполнять маршрут.

Я знаю, что ng-valid, но я хочу, чтобы проверка выполнялась только при нажатии кнопки.

Есть ли способ условно выполнить отправку формы из контроллера?

Ответ 1

Вы можете добавить метод отправки в FormController. Я сделал это:

<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();
     }
   };
}])

Ответ 2

Вы пытались использовать директиву 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>

Ответ 3

Это не способ Angular ', но вы можете отправить форму с помощью vanilla javascript. Например, вы можете указать форму id и сделать:

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

или если у вас есть кнопка отправки, вы можете нажать на нее:

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

Я обнаружил, что первый из них не сохранил привязки данных (я использовал его в проекте с виджемом JQuery, который не имел альтернативы Angular), но второй сохранил привязки. Я предполагаю, что это связано с тем, как был написан виджет JQuery.

Вы можете увидеть больше о запуске форм с помощью ванильного JS здесь:

Как отправить форму с помощью javascript?

Ответ 4

Как только просто отключите кнопку отправки до тех пор, пока форма не будет действительна:

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

Взгляните на этот похожий вопрос, который у меня был: Утверждение формы AngularJS с директивами - "myform. $valid" не совсем правильно для меня

Ответ 5

Развернуть с @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);
     }
   };
}])