如何在 Angular 中提交表单

Question

我有一个要使用 Angular 控制器验证的 html 表单。如果验证失败，我将某些类应用于 html。如果它通过了，我想让表单自己提交。虽然这看起来很简单，但我还没有找到一种简单的方法来做到这一点。我发现的一种方法使用$scope.$broadcast 函数来告诉表单提交，但是，我使用Controller as Ctrl 语法所以我宁愿不使用$scope。无论如何要从控制器提交表单吗？

我的简化 HTML

<form ng-controller="LoginCtrl as login" ng-submit="login.validate()" method="post">
    <input ng-model="login.username" />
    <input ng-model="login.password" />
</form>

JS

var app = angular.module("app", []);

app.controller("LoginCtrl", ["$http", function($http) {
    this.username = "";
    this.password = "";
    this.validate = function() {
        //validate
        if (valid) {
            // somehow form.submit()
        }
    };
}]);

我对 Angular 有点陌生，所以如果这是一个明显的问题，请原谅我；）

编辑： 我需要澄清一下，我希望避免使用 AJAX 提交表单（即$http.post）。基本上我想要的是相当于调用form.submit()的控制器。

用例： 让我准确解释一下我要做什么。

User arrives at login page
User enters credentials
User hits Submit
    Controller asks server (using api path) if the credentials are valid
    if valid then
        Tell the form to submit to regular login path // how?
    else
        Immediately tell the user they submitted invalid credentials

这样，如果用户输入了错误的凭据，他们就会立即获得反馈。 对于实际的表单提交，所有这些我都实现了except。

Answer 1

最简单的方法是将所有表单元素数据包装到一个对象中。如果您没有要预填充的数据，则不必创建此对象，ng-model 将为您创建它。

<form ng-controller="LoginCtrl as login" ng-submit="login.validate()" method="post">
    <input ng-model="login.MyFormData.username" />
    <input ng-model="login.MyFormData.password" />
</form>

这将导致控制器范围内的对象如下所示：

$scope.MyFormData={
   username :'foo',
   password:'bar'
}

准备提交时：

$http.post('path/to/server', $scope.myFormData).success(response){
   /* do something with response */
})

Answer 2

我认为您希望将验证作为表单提交流程的一部分。试试这样的：

HTML

<form ng-controller="LoginCtrl as login" ng-submit="login.submit()" method="post">
    <input ng-model="auth.username" />
    <input ng-model="auth.password" />
    <div class="error" ng-hide="valid">Something is invalid...</div>
</form>

JS

var app = angular.module("app", []);

app.controller("LoginCtrl", ["$http", "$scope", function($http, $scope) {
    $scope.valid = true;
    $scope.auth.username = "";
    $scope.auth.password = "";

    var valid = function() {
        // validate

        return valid; // true or false
    };

    this.submit = function() {
        if (valid()) {
            $http.post('/your/auth/url', { auth: auth }).success(function(response) {
                // whatever you're doing to store the auth response.
            });
        } else {
            // use this to conditionally show error messages with ng-show
            $scope.valid = false;
        }
    };
}]);

我不确定我是否理解您关于使用 controller-as 语法的评论。这不应该改变你使用$scope的方式。

Answer 3

我有一个示例，最低代码为here。注意，它是自我验证的，你甚至不需要从控制器提交任何东西！您可以将action和method字段包含为表单属性，如果表单有效，angular会提交表单

HTML

<form name="LoginCtrl as loginForm" method="Post" action="not-a-real-script.php">
  <input type="text" name="name" ng-model="loginData.name" placeholder="username" required="" />
  <input type="password" name="password" ng-model="loginData.password" placeholder="Password" required />
  <input type="submit" ng-disabled="loginForm.$invalid" value="Login" />
</form>

JS

angular.module('app', [])
.controller('LoginCtrl', function($scope) {
  $scope.loginData = {};
});