如何在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

这样，如果用户输入了错误的凭据，用户将立即获得反馈。 除了实际的表单提交，我已经实现了所有这些功能。

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

我有一个最起码的代码的例子在这里 。 注意，它是自我验证的，您甚至不需要从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 = {};
});