如何提交角形式 [英] How to submit a form in Angular

问题描述

我有我与角控制器验证HTML表单。如果验证失败，我申请某些类别的HTML。如果通过，我想让表单提交本身。虽然这看起来很简单，我还没有找到一个简单的方法来做到这一点。一种方法我发现使用 $范围。$广播函数告诉表单提交，不过，我现在用的是控制器如Ctrl 语法，所以我宁可不使用 $范围。反正有从控制器提交表单？

I have an html form that I am validating with an Angular controller. If the validation fails, I apply certain classes to the html. If it passes, I want to let the form submit itself. Although this seems very straightforward, I haven't found an easy way to do this. One method I have found uses the $scope.$broadcast function to tell the form to submit, however, I am using the Controller as Ctrl syntax so I would rather not use $scope. Is there anyway to submit a form from a controller?

我的简化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()
        }
    };
}]);

我有点新的角所以请原谅我，如果这是一个明显的quesion;）

I am somewhat new to Angular so forgive me if this is an obvious quesion ;)

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

EDIT: I need to clarify that I am looking to avoid submitting the form with AJAX (i.e. $http.post). Basically what I want is the controller equivalent of calling form.submit().

使用CASE ：
让我解释什么，我试图做的。

USE CASE: Let me explain exactly what I am trying to do.

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

这种方式，用户得到即时的反馈，如果他们进入了不正确的凭据。
所有这一切我已实施的除了实际表单提交。

推荐答案

我想你想拥有审定您的表单提交流程的一部分。尝试是这样的：

I think you want to have validation as part of your form submission flow. Try something like this:

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

我不知道我理解你如何使用控制器，为语法注释。这应该不会改变，你如何使用 $范围。

这篇关于如何提交角形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！