Question

我有一个html表单，我正在使用Angular控制器进行验证。如果验证失败，我将某些类应用于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

这样，如果用户输入的凭据不正确，则会立即收到反馈。所有这些我已经为实际的表单提交实现了除。

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

我不确定我理解你关于使用控制器作为语法的评论。这不应该改变您使用$scope的方式。

Answer 3

我有一个最小代码here的例子。请注意，它是自我验证的，您甚至不需要从COntroller提交任何内容！您可以将操作和方法字段包含为表单属性，如果表单有效，则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 = {};
});

如何在Angular中提交表单

3 个答案: