forms - 我可以从控制器触发表单提交吗？

Question

我想从控制器中提交传统的表单。场景是我想在我的网络服务器上点击一个路由并重定向到它的响应，我可以使用 HTML 中的常规表单来完成，但我还想在按下提交按钮时对其字段进行一些验证，并且如果验证失败，我不想做路线。

我知道 ng-valid，但我只希望在按下按钮时进行验证。

有没有办法从控制器内有条件地提交表单？

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

Answer 2

您是否尝试在表单上使用 ng-submit 指令？您可以在验证后返回真/假。

控制器

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>

Answer 3

这不是 Angular 的方式，但您可以使用 vanilla javascript 提交表单。例如，您可以给表单一个 id 并执行以下操作：

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

或者如果你有一个提交按钮，你可以点击它：

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

我发现第一个没有保留数据绑定（我在一个没有 Angular 替代品的带有 JQuery 小部件的项目上使用它），但第二个保留了绑定。我认为这与 JQuery 小部件的编写方式有关。

您可以在此处查看有关使用 vanilla JS 触发表单的更多信息：

如何使用javascript提交表单？

Answer 4

$scope.payForm.$setSubmitted();

将表单设置为 $submitted 状态。这还将在表单的所有子表单和父表单上设置 $submitted

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

Answer 5

在表单有效之前完全禁用提交按钮怎么样：

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

看看我遇到的类似问题： AngularJS Form Validation with Directives - “myform.$valid” 不太适合我

Answer 6

从@ReklatsMasters's answer扩展，如果您想在提交表单之前更改值，您可以这样做......

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